Passing variable from App.tsx to a Component in React Native

Question

I am trying for few days to pass a parameter from my App.tsx to my TabOneScreen.tsx which is a component.

Here is my App.tsx :

const App = () => {
  
  const [producteurs, setSearchProducteurs] = useState('');

  useEffect(() => {
    sqlService.initDB();
    sqlService.insertInDB();
    sqlService.search().then((data: any)=>{
      setSearchProducteurs(data)
    }).catch((error) => console.log(error));
  })

  new Map(producteurs);

  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </SafeAreaProvider>
    );
  }
}

export default App;

and I tried to do a new Map(producteurs) which is my component.

But i don't know how to do to retrieve this parameter in my component.

I have a constructor like this :

class Map extends Component<any, any> {
  
  private _map: any;

  constructor(props: any){
    super(props);

    this.state = {
      company_name: []
    }
  }

I want that my company_name take the value of my variable producteurs.

Is it possible in this way ?

Thanks in advance.

Answer 1

I haven't worked with react native, but i guess you do it just like in react:

1. Instead of typing "new Map(producteurs)", you are going to return this:

   <SafeAreaProvider>
    <Map company_name={producteurs}/>
    <Navigation colorScheme={colorScheme} />
    <StatusBar />
   </SafeAreaProvider>
   

2. In your Map component constructor you will need to assign the prop to the company_name:

   company_name: props.company_name || []