Style

Styling Component

• In-Line style : write style inside xml tag
• Internal Style: write style in component file
• External Style: write style in separate file

In-Line Style

                
                    import React from "react";
                    import { View, Button, Text, StyleSheet} from "react-native";

                    const Product = () => {
                        return (
                            <View style={{flex:1, alignItems: 'center', justifyContent:'center', backgroundColor:'red'}}>
                                <Text style={{color:'#000', fontSize:25, fontWeight: 'bold'}}>Hello Eveyone : my name is Saten Pratap  </Text>
                                <Button style={{backgroundColor:'blue', width: 80, height: 40}}>Submit  <Button>
                            </View>
                        );
                    };
                    export default Product;
                
            

Internal Style

We should use stylesheet to create separate style object

                
                  import React from "react";
                  import { View, Button, Text, StyleSheet} from "react-native";

                    const Product = () => {
                        return (
                            <View style={styles.mainView}>
                                <Text style={styles.text}>Hello Eveyone : my name is Saten Pratap  </Text>
                                <Button style={styles.button}>Submit  <Button>
                            </View>
                        );
                    };
                    const styles = StyleSheet.create({
                        mainView: {
                          flex:1, 
                          alignItems: 'center', 
                          justifyContent:'center', 
                          backgroundColor:'red'
                        },
                        text:{
                          color:'#000', 
                          fontSize:25, 
                          fontWeight: 'bold'
                        },
                        button : {
                          backgroundColor:'blue', 
                          width: 80, 
                          height: 40
                        }
                    });

                    export default Product;
                
            

External Style

We should create separate style file

                
                // Created separate file for style
                // product/Styles.tsx
                  export const Styles = StyleSheet.create({
                          mainView: {
                            flex:1, 
                            alignItems: 'center', 
                            justifyContent:'center', 
                            backgroundColor:'red'
                          },
                          text:{
                            color:'#000', 
                            fontSize:25, 
                            fontWeight: 'bold'
                          },
                          button : {
                            backgroundColor:'blue', 
                            width: 80, 
                            height: 40
                          }
                      });
                
            

                
                  import React from "react";
                  import { View, Button, Text, StyleSheet} from "react-native";
                  import { Styles } from '/Styles'

                    const Product = () => {
                        return (
                            <View style={Styles.mainView}>
                                <Text style={Styles.text}>Hello Eveyone : my name is Saten Pratap  </Text>
                                <Button style={Styles.button}>Submit  <Button>
                            </View>
                        );
                    };
                
                    export default Product;