I have a application in React Native, and I'm applying some rotation effects to my drawer, in my application running on the phone, everything works perfectly, but when I migrate to react-native-web it doesn't work correctly, as you can see in the image below, the difference which stays on the screens when it runs on a cell phone and when it runs on the web.
In the web, when the drawer is closed, it still applies the rotation effect, that's doesn't could happen. I put my project into codesandbox.io
To correct this problem, I tried to use Animated.concat(), but it still didn't work:
<Animated.View
style={[
styles.animatedView,
{
borderRadius: "50px",
transform: [
{ rotate: Animated.concat("-8deg") },
{ translateX: Animated.concat("70px") },
{ translateY: Animated.concat("20px") }
]
}
]}
>
<Stack.Navigator
screenOptions={{
headerTransparent: true,
headerTitle: null,
headerTitleAlign: "left",
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.openDrawer()}>
<View style={styles.screenOptionsView}>
<Image
source={require("../assets/images/menu.png")}
style={styles.screenOptionsImage}
/>
<Text style={styles.screenOptionsText}>START</Text>
</View>
</TouchableOpacity>
)
}}
>
<Stack.Screen name="Start" component={Start} />
<Stack.Screen name="Cart" component={Cart} />
<Stack.Screen name="Favorites" component={Favorites} />
<Stack.Screen name="Orders" component={Orders} />
</Stack.Navigator>
</Animated.View>
Do you know how I can make it work on the web as well as it works on mobile?
Thank you very much in advance!!!!
Related
I am using react navigation V6. And I have 6 components. But when I navigate from the first to the sixth: the transition goes through all the active components and flashes white. I would like to either remove the white flash or change the effect of the slide transition to fade. Thank you.
<View style={{flex: 1, borderTopWidth: 1, borderTopColor: '#5656582b'}}>
<Tab.Navigator
initialRouteName="Tous"
screenOptions={{
tabBarScrollEnabled: true,
tabBarIndicatorStyle: {
backgroundColor: '#60103b',
height: 4,
},
tabBarActiveTintColor: '#60103b',
tabBarInactiveTintColor: 'black',
tabBarLabelStyle: { fontSize: 17,color: 'black',fontWeight: "500",letterSpacing: 1},
tabBarItemStyle: {width: 'auto', padding: 10},
lazy:true,
swipeEnabled:false,
}
}
sceneAnimationEnabled = {false}
//animationEnabled: false}
>
<Tab.Screen name="Tous" initial component={Home} />
<Tab.Screen name="Livres" component={LivreHome} />
<Tab.Screen name="Livres Audios" component={LivreAudio} />
<Tab.Screen name="Podcasts" component={PodcastHome} />
<Tab.Screen name="Magasines" component={MagasineHome} />
<Tab.Screen name="Documents" component={DocumentHome} />
</Tab.Navigator>
</View>
First of all wrap <Tab.Navigator> in NavigationContainer
For remove white flash there is a way by giving dark theme to NavigationContainer
Example code
import {
NavigationContainer,
DarkTheme,
} from '#react-navigation/native';
export default () => {
return (
<NavigationContainer theme={DarkTheme}>
{/*Other Tab.Navigtor content*/}
</NavigationContainer>
);
};
<NavigationContainer theme={DarkTheme} >
{userDataSelect.hasOwnProperty('access_token')?
<MainNavigation /> : <AuthNavigation />
}
</NavigationContainer>
When I navigate on 2 successive screens, for example 1 to 2 or 2 to 3, there is no flash. But when I navigate from 1 to 5 I always have the white flash as if the navigation goes through all the components of the browser
Tried different things none of them working, documentation also doesn't help
<MainFlowStack.Navigator
screenOptions={{headerTitleAlign: 'left', shadowColor: 'transparent', headerStyle: {height: 200}}}
>
<MainFlowStack.Screen name="RoutinesList" component={RoutinesListScreen} option={{headerStyle: {height: 600}}} options={{
headerTitle: (props) =>
(<View style={{width: '100%'}}>
<Text style={styles.header1}>
Your Workouts
</Text>
</View>),
headerShadowVisible: false,
headerStyle: {height: 100}
}} />
<MainFlowStack.Screen name="RoutineScreen" component={RoutineScreen} options={({ route }) => ({ title: route.params.name })} />
</MainFlowStack.Navigator>
The headerStyle prop for the Stack.Navigator does not support setting a custom height. From the official documentation:
headerStyle
Style object for header. Supported properties:
backgroundColor
As far as I am concerned, this has changed compared to react-navigation v5.
However, we could provide a custom header component and set a specific height this way.
<Stack.Screen
options={
header: (props) =>
(
<View style={{ height: 100 }}>
...
</View>
),
}
/>
I don't have enough reputation to write a comment, but #fabriziocucci i actually right. You can edit height of header.
I created custom component for header and just passed it in header prop like this:
<Tab.Navigator
screenOptions={({route}) => ({
header: NavHeader,
})}>
<Tab.Screen name="myComponent" component={myComponent}/>
</Tab.Navigator>
and then in styles:
style={{width: '100%', maxHeight: 20}}
David's answer is not entirely correct. Even though the V6 doc doesn't mention it, I just tested that you can actually set the header height as follows:
<Stack.Screen
component={MyScreen}
name="TripScreen"
options={() => ({
headerStyle: { height: 96 }
})}
/>
I have a Viewinside a SafeAreaView in a screen which has postion:absolute. When I include the view, a TouchableOpacity rendered in the header no longer responds in ANDROID (but always works fine in iOS).
Home screen:
render() {
return (
<SafeAreaView style={styles.SafeAreaContainer}>
<View style={styles.homeBackgroundContainer}> {/* <--- offending view! */}
<BlueCircle style={styles.homeBackgroundSvg} />
</View>
<View style={styles.homeView}>
<View style={styles.homeGreetingContainer}>
<Title style={styles.homeGreeting}>Hi, </Title>
<Title style={styles.homeGreetingName}>{username}</Title>
</View>
// Other components
</View>
</SafeAreaView>
);
}
styles.homeBackgroundContainer:
homeBackgroundContainer: {
borderColor: COLOR.transparent,
position: 'absolute',
top: '-50%',
left: '-25%',
right: 0,
bottom: 0,
},
The header is declared in the drawer navigator screen options. Note the TouchableOpacity in the header - this is used to open the drawer.
works in iOS
works from the "Content" screen
works when the homeBackgroundContainer(and its children) are commented out (Home Screen)
DOES NOT WORK IN ANDROID when homeBackgroundContainer is rendered (Home Screen).
Drawer Navigation & Header:
function DrawerContainer() {
return (
<Drawer.Navigator
screenOptions={({navigation}) => ({
headerLeft: titleLogo,
headerStyle: {
// colors only
},
headerTitle: () => {},
headerRight: () => (
<TouchableOpacity
style={styles.hamburgerIconButton}
onPress={() => navigation.toggleDrawer()}>
<Image source={require('../assets/hamburger.png')} />
</TouchableOpacity>
),
})}>
<Drawer.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: true,
// more options
}}
/>
<Drawer.Screen
name="Content"
component={ContentScreen}
options={{
headerShown: true,
}}
/>
</Drawer.Navigator>
);
}
styles.hamburgerIconButton:
hamburgerIconButton: {
marginRight: 20,
},
Other questions on SO have shown that absolute positioning can affect TouchableOpacity. I have tried setting the zIndex of the TouchableOpacity to 1, and also tried setting a positive elevation value but there is no change in behaviour.
Visually, I can see the header colors and content is rendered on top of the view which is the desired state. So if the header is rendered over the view, why isn't the TouchableOpacity responding?
To get the TouchableOpacityin a navigation header to respond on android when there's a view on the screen which has postion: absolute, I had to bring the headerStyle(not the touchable opacity style) forward on the z-axis.
screenOptions={() => ({
headerStyle: {
zIndex: 1,
},
})};
I am trying to style my material top tabs using createMaterialTopTabNavigator from '#react-navigation/material-top-tabs'. Currently, they look like this:
With this code:
//Home top tabs
function HomeTopTabs() {
return (
<TopTab.Navigator initialRouteName="HomeFeed">
<TopTab.Screen name="HomeFeed" component={Home} />
<TopTab.Screen name="FriendFeed" component={FriendsScreen} />
</TopTab.Navigator>
);
}
*Both screens render a different list of items fetched from the db. This method renders the lists correctly, but as you can see, the top tabs are way too high.
Tried using SafeAreaView, but now my list items do not show up in the tabs.
Nothing happens for the height, but its blue and my list elements are missing. Code:
//Home top tabs
function HomeTopTabs() {
return (
<SafeAreaView
style={{ backgroundColor: '#2196f3' }}
forceInset={{ top: 'always', horizontal: 'never', bottom: 'never' }}>
<TopTab.Navigator initialRouteName="HomeFeed">
<TopTab.Screen name="HomeFeed" component={Home} />
<TopTab.Screen name="FriendFeed" component={FriendsScreen} />
</TopTab.Navigator>
</SafeAreaView>
);
}
Anyone have a solution?
Can you try this?
import { useSafeArea } from "react-native-safe-area-view";
...
const safeArea = useSafeArea()
return(
<View style={{flex: 1, paddingTop: safeArea.top}}>
<HomeTopTabs />
</View>
)
And HomeTopTabs as:
function HomeTopTabs() {
return (
<TopTab.Navigator initialRouteName="HomeFeed">
<TopTab.Screen name="HomeFeed" component={Home} />
<TopTab.Screen name="FriendFeed" component={FriendsScreen} />
</TopTab.Navigator>
);
}
I am using "react-navigation-shared-element": "5.0.0-alpha0","react-native-shared-element": "^0.7.0" and react-navigation 5
I am getting this warning RNSharedElementTransition is not available, did you forget to link react-native-shared-element into your project?
Nothing breaks though, it just doesn't work.
Manual linking is not there in the docs of react-native-shared-animation
My react version is 16.9
My Stack Navigator
const Stack = createSharedElementStackNavigator()
<Stack.Navigator headerMode='none'>
<Stack.Screen name='Resource' component={Home} />
<Stack.Screen
name='Resource_Detail'
component={ResourceDetail}
sharedElementsConfig={(route, otherRoute, showing) => {
const { id } = route.params;
return [{
id: id,
animation: 'move'
}];
}} />
</Stack.Navigator>
SharedElement in Home
<TouchableOpacity onPress={() => navigation.navigate('Resource_Detail', { thumb, name, author, url, subCode, semesters, data, id })}>
<View style={styles.container}>
<SharedElement id={`${id}`}>
<Image style={styles.thumbImg} source={{ uri: thumb }} />
</SharedElement>
<Text style={styles.secondaryText}>{author} </Text>
<Text style={[styles.primaryText, { color }]}>{name}</Text>
</View>
</TouchableOpacity>
SharedElement in Resource Detail
<SharedElement id={`${id}`}>
<Image style={styles.img} source={{ uri: thumb }} resizeMode='cover' />
</SharedElement>
react-navigation#5 is not supported
See documentation (last sentence in the installation section)