I am new to learning React Native and I would like to build an(ReactNaive & Expo) application with good interfaces look, How can I build a component and send style{backgroundColor} as props then render the component on Home

home.js

import React from 'react'
import { View, Text , Image , ScrollView} from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { COLORS, SIZES,FONTS} from '../styles/theme.js';
import Category from '../components/Category.js';
import CategorySlider from '../components/CategorySlider'

 const Home = () => {
     function renderHeader(){
         return(
        <View
         style = {{
        flexDirection: 'row' ,
        marginTop: 40,
        marginBottom: 10,
        paddingHorizontal:SIZES.padding,
        alignItems : 'center'

         }}
         >
         <View style={{flex:1}}>
          <Text >Hello , Wafa</Text>
         </View>
         {/* Nonfiction Button */}
     </View>
         )}

    return (
        <View 
        style ={{
            flex: 1,
            backgroundColor: COLORS.white
        }}
        >
            
            {/* HEADER */}
            {renderHeader()}

            {/* Content */}
           <View style={{height:130 , marginTop:SIZES.margin}}>
         <ScrollView 
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          >
            <Category name='Balance'  />
            <Category name='Saving' style={COLORS.green} />
            <Category name='Income' style={ COLORS.brown } />
            <Category name='Loans' style={ COLORS.pink}/>
            <Category name='Saving' style={ COLORS.pink}/>
            <Category name='Saving' style={ COLORS.pink}/>
         </ScrollView>
           </View>
          
            <CategorySlider/>
        
        </View>
    )
}

export default Home

it is the component i want render on home.js

Category.js

import React, { PureComponent } from 'react'
import { Text, View ,StyleSheet ,Image } from 'react-native'
import { backgroundColor } from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
import { COLORS, SIZES,FONTS} from '../styles/theme.js';

export default class Category extends PureComponent {
    render() {
        return (
            <View style={{marginLeft: SIZES.margin ,marginRight: SIZES.margin}}>
                <View>
             <View style={{ 
             height: 60,
             width: 60,
             backgroundColor:COLORS.pink,
             borderRadius: SIZES.radius,
             }}>
              <View />
               <View>
                <Image />
               </View>
             </View>
             <Text 
             style={{textAlign:'center'}}
             >
             {this.props.name}</Text>
           </View>
            </View>
        )
    }
}

l made also File for Design system contains style i will repeat on application

theme.js

import { Dimensions } from "react-native";
import { useFonts } from 'expo-font';
const { width, height } = Dimensions.get("window");


export const COLORS = {
    green: "#68AB9F",
    brown: "#c18e62",
    pink: "#d99e96" ,
    gray: "#383e42",
    white: "#f5f7fc",

}

CodePudding user response：

Here you're working on one with a Functional based component (home.js) and one with Class-based (Category.js). Standard is if first convert your Category component with functional then you can save that props to your Category component like:

import React, { useState } from 'react'
import { Text, View ,StyleSheet ,Image } from 'react-native'
import { backgroundColor } from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
import { COLORS, SIZES,FONTS} from '../styles/theme.js';

const Category = (props) => {
      const [backgroundColor, setBackgroundColor] = useState(props.style || null);  //store your prop in state like this
      const [name, setName] = useState(props.name || null);

        return (
            <View style={{marginLeft: SIZES.margin ,marginRight: SIZES.margin}}>
                <View>
             <View style={{ 
             height: 60,
             width: 60,
             backgroundColor: backgroundColor,
             borderRadius: SIZES.radius,
             }}>
              <View />
               <View>
                <Image />
               </View>
             </View>
             <Text 
             style={{textAlign:'center'}}
             >
             {name}</Text>
           </View>
            </View>
        )
}

export default Category;

Hope this works for you.

CodePudding user response：

In your parent component take your style object in the wrapper of child component i.e.

function Parent(){
   return (
      <Child cssdata={{backgroundColor:'red',marginLeft:8}}/>
   )
}

and in your child component take this data from props and applied to it

function Child(props){
   return (
     <View style={props.cssdata}></View>
   )
}