such as tabbar ,appbar or others i want to implement make component as said in the title.

const App = () => {
  return (
    
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Main" >
          <Stack.Screen name="Main" component={MainScreen} options={{ headerShown: false }} />
          <Stack.Screen name="Analyze" component={AnalyzeScreen} options={{ headerShown: false }} />
          <Stack.Screen name="Write" component={WriteScreen} options={{ headerShown: false }} />
          <Stack.Screen name="Result" component={ResultScreen} options={{ headerShown: false }} />
        </Stack.Navigator>
      </NavigationContainer>
    
  );
};

this is App.js and declared screens. it dosen't matter. i want just a shared component. but i don't want tricks each component in each screen. p.s screens are just a blank screen.

<View style={{flex:1,}}><Text>hello world</Text></View>