What I'm facing:
I have a StackNavigator in which I want to set a ImageBacgkround to all it's children screens. The problem is, I've already setted my StackNavigator cardStyle: { backgroundColor: 'transparent' }, following React Navigation Docs, and wrapped it inside a ImageBackground but still can't get it working.
What I've tried:
//My navigator component is more complex, but the concept looks something like this
//for both navigators
const Stack = createStackNavigator();
const MyStackNavigator = () => (
<ImageBackground source=('../assets/my-background.png') resizeMode='cover' style={{flex: 1}}>
//If I change BackgroundColor to 'red' or anything like that, it works fine
//so I think the problem isn't related to styling properties
<Stack.Navigator screenOptions={{cardStyle: { BackgroundColor: 'transparent' } }}>
<Stack.Screen name='Screen1' component={Component1}/>
<Stack.Screen name='Screen2' component={Component2}/>
<Stack.Screen name='Screen3' component={Component3}/>
</Stack.Navigator>
</ImageBackground>
);
export default App() => (
<MyStackNavigator />
);
I've done the same thing in a DrawerNavigator inside my navigator component passing sceneContainerStyle: { backgroundColor: 'transparent' } }} and it actually works. It seems like my StackNavigator ain't rendering it's parent components correctly.
One of my StackNavigator's screens:
One of my DrawerNavigator's screens:
Both navigator's screens layout are wrapped in a transparent container View, so as you can see, the drawer screen is rendering background correctly but the stack screen isn't. Maybe I'm passing wrong props to my StackNavigator?
well with react-navigation 6 you can use the theming option to customize the look for the background to be transparent (Default is rgb(242,242,242)) use a NavigatorContainer to apply the theme
here is an answer that may help
Related
I am experiencing an odd bug with the React Native Navigation v5 headerRight Buttons. I currently have a TouchableOpacity set as a headerRight component in the react native navigation screen; however, the onPress event is not being triggered. There seems to be an invisible object in the middle of the header (title area) that has an absolute position, which prevents the onPress event from being registered. I tried playing around with the zIndex and headerMode values; however, the button is still not pressable. I can only press the button when it is placed on the far right of the screen (i.e. marginRight: 0). Any help would be greatly appreciated.
For reference, I am encountering the same issues as the following thread: https://github.com/react-navigation/react-navigation/issues/7052
Example of my Code
<StackNavigator.Navigator headerMode='screen'>
<StackNavigator.Screen
name='Home'
component={HomeScreen}
options={{
headerRight: () => (
<TouchableOpacity
onPress={() => {}}
>
<Text>Button Text</Text>
</TouchableOpacity>
),
}}
/>
</StackNavigator.Navigator>
Updating to the following packages seems to have resolved it for me:
"#react-navigation/stack": "5.9.3",
"#react-navigation/drawer": "5.9.3",
"#react-navigation/native": "5.7.4",
Try to give higher values to zIndex may be 100 or give headerMode: float if that not also not works try updating your packages .
When I tried just to render the HomeScreen component not using Stack.Screen I was able to get 100% width but when I tried to use code bellow, 100% width screen is not working
const HomeScreen = () => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'red'}}>
<Text>Home Screen</Text>
</View>
);
}
const MainContainer = () => {
return (
<NavigationContainer >
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
Not only that, the width is zero if you set headerShown: false.
Just remove the outer View of the NavigationContainer. It works for me.
Can you try with display: flex and remove flex:1
Were you running the remote debugger when you were having this issue? I had the same problem and it resolved when I turned it off.
It seems like it might be a slow load issue and the stylesheets aren't being applied before rendering, so the screen is taking the width of the header text (I may be completely wrong about this though). When I removed the style prop from my View component, saved it, then put it back and saved again it temporarily resolved the issue until I reloaded Expo.
Overview
I am currently working on a React Native application that uses the React Navigation library. From the React Navigation library, I'm using the navigationOptions property to create a Header component in each of my screens. Each screen uses the exact same properties:
HomeScreen.navigationOptions = {
headerRight: (
<Ionicons
name={"md-menu"}
size={26}
style={{ marginBottom: -5, paddingRight: 15 }}
color={"#ccc"}
/>
),
headerTitle: (
<HeaderLogo/>
)
}
My Logo component is as such:
export default HeaderLogo = () => {
const logo = require("../../../assets/images/logo.png");
return (
<Image
style={{
resizeMode: "contain",
height: 40,
width: 85,
marginLeft: 85
}}
source={logo}
/>
)
}
The problem
The logo renders in the header correctly as expected; however, whenever I switch screens, the logo briefly disappears and reappears in a flash. Its noticeable and does not look good. I want the header to appear static no matter how many times I switch screens. I'm assuming this has something to with the require()method, where its pulling the image everytime. My question is:
How can I efficiently use an Image component in my Header, such that the header appears static?
Add headerMode: 'float' to the navigationOptions of the stack navigator that contains your screens.
From createStackNavigator documentation:
headerMode - Specifies how the header should be rendered:
float - Render a single header that stays at the top and animates as screens are changed. This is a common pattern on iOS.
screen - Each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android.
none - No header will be rendered.
I'm trying to use React-Native-Picker-Selects headless component for both iOS and Android. According to the docs found here:
you can pass children (such as a custom button or input) for the component to wrap (for both iOS and Android
Here is a sample of my code:
import React, { Component } from 'react';
import {
View,
Text,
} from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
<View style={{flex:1}}>
<RNPickerSelect
placeholder={{}}
items={MyList}
onValueChange={(itemValue, itemIndex) => {
console.log('itemValue')
}}
style={{...pickerSelectStyles}}
>
<View style={{backgroundColor:'purple', flex:1, justifyContent:'center', alignItems:'center'}}>
<Text>
Test Text where I should be able to touch to get things to happen
</Text>
</View>
</RNPickerSelect>
const pickerSelectStyles = StyleSheet.create({
headlessAndroidContainer: {
flex:1
}
});
<View style={{height:height * 0.5}}>
<Text>test</Text>
</View>
</View>
const pickerSelectStyles = StyleSheet.create({
viewContainer: {
flex:1,
backgroundColor: 'purple',
},
headlessAndroidContainer: {
backgroundColor: 'purple',
flex:1
}
});
What I expect to happen is that on my screen I see two-section, half purple, and half white. The purple section has the text saying that things should happen, and the white section should have Tested. I should be able to tap anywhere on the purple section and my picker with MyList should come up.
This is working as expected on a simulator, but not on a real android device. on a real device, it seems that I'm able to tap around on the purple area, and the picker shows up very sporadically. Any assistance would be greatly appreciated!
Edit: Forgot to mention that this is specifically an android problem, it works on both real and simulated iPhones
Seems like having the RNPickerselect wrapped in a TouchableWithoutFeedback breaks it for some reason, once outside that tag it worked fine.
Adding the latest version (version 5.0) seems to fix this issue. The version I added was 4.4, and I added it to my project maybe 10 days ago. The newest version was released about a week ago, and seems to solve this problem.
I'm having a RefreshControl attached to a ScrollView. It all works as expected but initially (when I didn't start scrolling), there's always showing a RefreshControl on the top right. When I start scrolling, it disappears.
Any idea how to get rid of that?
Code is nothing special, if you want, i'll give it here:
// ...
export default class SomeList extends React.Component
{
// ...
render() {
return <View style={{flex: 1}}>
<CustomNavbar />
<ScrollView
style={{marginTop: 35}}
refreshControl={
<RefreshControl
tintColor={$.config.colors.style}
onRefresh={() => this._refreshList()}
refreshing={this.state.listRefreshing}
/>
}
>
{this._renderItems()}
</ScrollView>
</View>
}
}
This is a bug in react-native which was introduced in version 0.31 or so.
It was fixed in version 0.34.1 (see this commit), so I guess you're using a previous version.
If you do not wish to upgrade, you can temporarily solve it by settings the background color of the refresh control to transparent:
<RefreshControl style={{backgroundColor: 'transparent'}}/>