flexible-view

[React-native] Enable you to change styles directly to your any views right in mobile screen. Change styles realtime in group. Any where any time only with your phone

Getting started

$ npm install flexible-view --save

Notes:

• All styles will be saved in your firebase's database.
• A View (imported from flexible-view) that you set it an "id" is flexible view. Or not, it's just a simple view from react-native

Usage

import React, { Component } from 'react';
import { StyleSheet, Text } from 'react-native';
import View, { Refresh, Styles, StylesService } from 'flexible-view';

export default class SampleComponent extends Component {

    constructor(props) {
        super(props);
            this.state = {};    //Required for Refresh works
            Refresh.context(this); //Init refresh helper
            //Config your firebase'database once.
            StylesService.configFirebase({
                apiKey: "AIzaSyDyr0Oqrrxg5l6PsPfaAzNVyGM2QVrUyBo",
                authDomain: "sohu-2b9ef.firebaseapp.com",
                databaseURL: "https://sohu-2b9ef.firebaseio.com",
                projectId: "sohu-2b9ef",
                storageBucket: "sohu-2b9ef.appspot.com",
                messagingSenderId: "1006370301430"
            });
    }

    render() {
        return (
            <View style={styles.container}>
            
            {/*
            TEXT, UNCLICKABLE VIEWS
            In this situation, when you click "Hello World 1",
            you can change styles*/}
            <View id="example style id" style={Styles.view("example style id")}>
                <Text style={Styles.text("example style id")}>Hello World 1</Text>
            </View>
            
            {/*
            BUTTON, CLICKABLE VIEWS
            Or try this code It will draw a paint-brush icon,
            only when you click on this icon, you can change "Hello Wolrd 2" styles
            */}
            
            <View id="example style id 2"/>
            <Text style={Styles.text("example style id 2")}>Hello Wolrd 2</Text>
            
            
        </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});

!!Important: Release notes:

Get all styles from firebase and release by this way in your App.js

import { Styles } from 'flexible-view';

/**
* Constructor
*/
constructor() {
...
Styles.release({
"example style id": { color: 'red', fontSize: 25 } 
});
}