I can't find if it's possible to create tabs in screen in React Native. IS there any way to do this? I mean, I already use StackNavigator and I can't understand how to add TabNavigator to screen from StackNavigator.
Update! Solution for this question is really simple, but for me, totally it wasn't obvious at all! Just set flex style to your view
Example:
<View style={{ flex: 1 }}> // <- this is main screen
<View> // <- this is screen header, you don't change this when click on Tab
Some header
</View>
<View style={{ flex: 2 }}>
<YourTabNavigator /> // <- your tabs (imported from external or same file)
</View>
</View>
Yes, you can create tabs, as it is common design used in mobile applications.
As I can't use comments to get some neccessary information.
However I'll try to provide a generic answer.
If you are using react-navigation then you can create tabs with TabNavigator provided by react-navigation. Documentation contains the neccessary code as well.
You can also use some pure JS component like react-native-tabs
And if you are using some other navigation library, you can see the corresponding documentation.
Related
I am not able to fill the status bar area with component. I tried to do it by hiding the status bar using <StatusBar hidden />. But this one leaves a white space there. For example I want to fill the green image the status bar.
TLDR: working project link
On the gist link (you've provided on the comment), I can see that you are using the following structure
<SafeAreaView>
<StatusBar ... />
<ImageBackground ...></ImageBackground>
</SafeAreaView>
If you want to hide the status bar and cover the whole screen with the image you need to change SafeAreaView to just View and also remove StatusBar component.
<View>
<ImageBackground ...></ImageBackground>
</View>
Cause SafeAreaView will dynamically put some padding at the top. So although you've put style={{ height: '100%', width: '100%' }} it will respect the padding of SafeAreaView cause it is the parent component here.
Also at this point, you do not need StatusBar, cause the StatusBas already has an image as background.
hello I am new to react native I have given a task to create an image slider as shown in the picture
I have not found any library matching this design so I want to create a custom carousel how can I create this. Any sort of help will be appreciated.
Can you provide more details as to what is the requirements of this?
Seems like you are trying to create introductory slides in the app.
This plugin is really flexible and customisable. You might want to check this one out.
https://www.npmjs.com/package/react-native-app-intro-slider
Also if you desire to make a custom slider, you can use ScrollView and use the following configuration to the scrollView
<ScrollView
style={{ flex: 1 }}
pagingEnabled={true}
horizontal={true}
scrollEventThrottle={16} >
<View>
<Text>Screen 1</Text>
</View>
<View>
<Text>Screen 2</Text>
</View>
</ScrollView>
Tag me if you have any more questions regarding this.
Give this article a read to understand it better.
https://medium.com/backticks-tildes/create-a-custom-app-intro-slider-in-react-native-4308fae83ad1
Is it possible to extend the tab view (image) all the way to the top of the screen and have the tab bar overlay it? Tab bars' backgroundColor is "transparent". Using createMaterialTopTabNavigator from React Navigation v3. There seems to have been something along the lines of displayUnderTabBar option in the earlier versions but I can't seem to find it in the documentation anywhere.
What you do is create a custom component for the tabs and position it absolutely over the screens.
<Tab.Navigator tabBar={props => <MyCustomComponent {...props} />}>
{...}
</Tab.Navigator>
Check out the example of a custom tabBar component here.
In the above example, make the positioned absolutely to top. Note that if you do this, however, you will need to change TouchableOpacity to TouchableWithoutFeedback because of the problem noted in this question question.
In order to do this, following styles need to be applied to the custom Tab Bar component that's passed in to the createMaterialTopTabNavigator:
style={{
...
position: "absolute",
zIndex: 1,
width: '100%'
...
}}>
I am trying to create a tablet application, and I want my layout to have a sidebar and then content inside but I'm not able to do that I tried searching for how to create a nested navigator that will work independently of its parent and render inside its parent but wasn't able to find any help about it anyone knows how to do that or if its possible to define a fixed component for all navigator children.
I tried working on react-native-navigation, react-navigation and react-native-router-flux but none of them till now have helped me with my problem, anyone got any solution?
sorry if it wasn't clear, please ask questions in the comment if you didn't understand what I'm trying to reach
I found the solution by using React Navigation by Facebook where you can create a navigator and a view but either one that is preceeding the other won't show if you don't give it height and width
<View>
<View style={{ height: "100%", width: 150 }}>
<SideBar navigation={navigation} />
</View>
<View>
<ContentNavigator />
</View>
</View>
I have TextInput at the bottom of the screen. When TextInput is focused then keyboard appears and due to this all the flex view gets shrink to the available screen. I want to achieve that page layout should not change and input should be visible to user.
<View style={MainView}>
<View style={subMain1}>
<View style={{flex:1,backgroundColor:'#add264'}}></View>
<View style={{flex:1,backgroundColor:'#b7d778'}}></View>
<View style={{flex:1,backgroundColor:'#c2dd8b'}}></View>
</View>
<View style={subMain2}>
<View style={{flex:1,backgroundColor:'#cce39f'}}></View>
<View style={{flex:1,backgroundColor:'#d6e9b3'}}></View>
<View style={{flex:1,backgroundColor:'#69ee9a'}}>
<TextInput placeholder="input field"/>
</View>
</View>
</View>
const Styles = {
MainView:{
flex:1,
backgroundColor:'green'
},
subMain1:{
flex:1,
backgroundColor:'blue'
},
subMain2:{
flex:1,
backgroundColor:'orange'
}
}
I just found an answer to this.
I just have to use fixed height for my main container and inside that I can use flex layout. And If keyboard is hiding the content then we can use Scrollview that will allow scrollable interface when user clicks on input.
This helped me hope it can help others. :)
I'm not quite sure I understand what the issue you're running into, but I recently struggled with keyboard avoiding views in my app - for some reason, the native component just wasn't working.
Check this package out - it did the trick for me, and offers some cool customization capabilities:
https://github.com/APSL/react-native-keyboard-aware-scroll-view
Use 'react-native-keyboard-aware-scroll-view' and keep this as parent view and put all view inside that view. This node module creates scrollview and it listens to keyboard show event and automatically scrolls your screen so user can see the input box without getting it hidden behind the soft keyboard.