Develop Reference

react native navigation How to make common(shared) component within app screens?

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>

I am trying to hide the back arrow navigation button but it does not work

hello guys I am trying to hide the back-arrow navigation button but it does not work
function MyStack(){
return(
<Stack.Navigator
screenOptions={{
headerTitle:null,
headerTransparent:true,
topBar:{
backButton:{
noBorder: true,
backButton: {visible: false},
leftButtons: [],
}
}
}}
>
<Stack.Screen name="Index" component={IndexScreen} />
<Stack.Screen name="drawer" component={Drawer} />
</Stack.Navigator>
)
}

Set headerLeft: null in your <Stack.Screen> or <Stack.Navigator> options like the below example.
function MyStack(){
return(
<Stack.Navigator
screenOptions={{
headerTitle:null,
headerTransparent:true,
headerLeft: null
}}
>
<Stack.Screen options={{headerLeft: null}} name="Index" component={IndexScreen} />
<Stack.Screen name="drawer" component={Drawer} />
</Stack.Navigator>
)
}

Lost the back button React Native Navigation

I have a problem with react native navigation bar. At the third screen("Auth" at stack navigator) back button I lost back button. How can I fix it?
I use this function for the navigate:
this.props.navigation.navigate("Choose")
this.props.navigation.navigate("Auth")
Code of NavigationContainer:
<View style={styles.container}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Root" component={Hello} />
<Stack.Screen name="Choose" component={ChooseMessengers} />
<Stack.Screen name="Auth" component={Auth} />
</Stack.Navigator>
</NavigationContainer>
<StatusBar style="auto" />
</View>

To have the back button, you have to push screens on top of the stack.
this.props.navigation.push("Auth")

react-native-navigation: set custom header to all screen except one

I wanted to set a custom header to all screens inside a stack navigator except to particular a screen, because I wanted it to have the default header. I know that setting the header property of the options props of the navigator will do the trick to apply the custom header to all the screens, but my question is how to exclude one specific screen and just set it to default?
This is my current implementation for setting the custom header to all screens:
<Stack.Navigator
screenOptions={{
header: () => <CustomHeader />,
}}
>
<Stack.Screen name="Page1" component={Page1} />
<Stack.Screen name="Page2" component={Page2} />
<Stack.Screen name="Page3" component={Page3} />
</Stack.Navigator>
What can I further add to this code to exclude the application of custom header to Page3?

Try this.
<Stack.Navigator>
<Stack.Screen name="Page1" component={Page1} />
<Stack.Screen name="Page2" component={Page2} />
<Stack.Screen options={{ header: () => <CustomHeader /> }} name="Page3" component={Page3} />
</Stack.Navigator>

If anyone was wondering how to do the same for Drawer Navigator here is the solution that I have come up with:
import React, {Fragment} from 'react';
const NavHeader = props => {
// ... NavHeader code goes here
};
export const withHeader = Component => {
return props => {
return (
<Fragment>
<NavHeader {...props} />
<Component {...props} />
</Fragment>
);
};
};
Then in your Drawer you do:
<Drawer.Navigator>
<Drawer.Screen
name={ROUTES.DASHBOARD}
component={withHeader(DashboardContainer)} // <--- Wrap it around component here.
/>
</Drawer.Navigator>
If you want all screens except one to have custom header you wrap up every component with withHeader except one.

You can set Header for all screens. For anyone which you want to avoid you can set headerShown to false.
<NavigationContainer>
<Stack.Navigator
headerMode={'screen'}
screenOptions={{
header: ({navigation}) => <Header navigation={navigation} />,
}}> // This custom Nav Header is for all screen
<Stack.Screen
name="Home"
component={HomescreenTabs}
options={{headerShown: true}}// Will user Header component as Nav Header
/>
<Stack.Screen
name="Editor"
component={Editor}
options={{headerShown: false,}} // No Nav Header component will shown
/>
<Stack.Screen
name="SearchList"
component={SearchList}
options={{headerShown: true}} // Will user Header component as Nav Header
/>
</Stack.Navigator>
</NavigationContainer>

Keyboard dismiss immediately when focusing textInput for first time react native

When I set cardStyleInterpolator to forFadeFromBottomAndroid or forVerticalIOS for a Stack.Screen, keyboard immediately dismiss when focusing on TextInput. This not happen for other type.
This only happen for first focus on TextInput.
Here is what's happening:
function RootStack() {
return (
<Stack.Navigator
screenOptions={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
}}
>
<Stack.Screen name="GROUPS" component={GroupsScreen} options={{ headerShown: false }} />
<Stack.Screen name="GROUP" component={GroupScreen} />
<Stack.Screen
name="CREATE_POST"
component={CreatePostScreen}
options={{
headerShown: false,
cardStyleInterpolator: CardStyleInterpolators.forFadeFromBottomAndroid,
}}
/>
<Stack.Screen
name="SELECT_POST_TYPE"
component={AnonymousTypeScreen}
options={{
cardStyle: { backgroundColor: "transparent", opacity: 1 },
headerShown: false,
cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
}}
/>
</Stack.Navigator>
);
}
and screen component is just simple component:
return (
<View>
<View style={{ flex: 1 }}>
<TInput />
</View>
</View>
);

I have downgraded dependencies for react-navigation ( native & stack ), because previouslly my code was working, so tried this and it worked.