I create a bottom navigation in my react native project. But its not looking good in Iphone10.
It showing extra space in bottom.Please help me how to resolve this.
This is below code i tried.
import BottomNavigation,{FullTab} from 'react-native-material-bottom-navigation'
<BottomNavigation
onTabPress={newTab => this.clickoftab(newTab.key)}
renderTab={this.renderTab}
tabs={this.tabs}
/>
My render tab part is this
renderTab = ({ tab, isActive }) => {
return (
<FullTab
style={{padding:0,margin:0}}
key={tab.key}
isActive={isActive}
label={tab.label}
renderIcon={this.renderIcon(tab.icon)}
/>
)
}
This is my output which i want to change in bottom navigation
Depending of your architecture app, if like you say in the comments, if you use SafeAreaView I thought in create the BottomNavigation at the same level of the SafeAreaView. I mean (sorry my english), I suppose that you have the SafeAreaView in your "Father file" like App.js. So, at the same time you can manage the BottomNavigation from there. So, you could put SafeAreaView inside of BottomNavigation making BottomNavigation the father of your app I guess. I don't know if I am explaining well. The conclusion could be that
just apply SafeArea To things that are inside of Navigation instead of
full application.
Related
Being a newbie to the field of app development, I actually don't know the name of this UI component .
This component basically act as a switcher between two screen, which shows up Explore screen when Explore is clicked and My Community screen when My Community is clicked
Someone please help me to know what to call this component and which npm package need to be used to deploy it.
THANKS IN ADVANCE!!!
You can use the switch component and its boolean value to conditionally display different screens/components.
Basic example using setState:
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
return (
<View>
<Switch
onValueChange={toggleSwitch}
value={isEnabled}
/>
{isEnabled ? <Text>Placerholder Screen 1</Text> : <Text>Placerholder Screen 2</Text>}
</View>
);
But in this situation I would advise you to use Tabs instead of a Switch. React Navigation is a great library to help you with this. You may want to look at the bottom tabs, material bottom tabs or material top tabs.
thank you for taking time to read & answer this question. I'll give my best to explain the issue I'm having.
The HomeStack component holds bottom navigation for four screens. One screen that is giving me a headache is ProjectsStack
export const ProjectsStack = (): ReactElement => {
return (
<ProjectsStackNav.Navigator initialRouteName='ProjectsScreen' screenOptions={defaultScreenOptions}>
<ProjectsStackNav.Screen name='ProjectsScreen' component={ProjectsScreen} />
<ProjectsStackNav.Screen name='CompletedProjectsScreen' component={CompletedProjectsScreen} />
<ProjectsStackNav.Screen name='ProjectTasksScreen' component={ProjectTasksScreen} />
<ProjectsStackNav.Screen name='CompletedProjectsTasksScreen' component={ProjectTasksScreen} />
</ProjectsStackNav.Navigator>
);
};
As you can see the ProjectTasksScreen is a component that renders a project based on the props => if it's open it will render ProjectTasksScreen otherwise it will render CompletedProjectsTasksScreen which is basically the same screen (reusability at its finest lol)
In order to go to the CompletedProjectsTasksScreen, you need to come from ProjectTasksScreen.
Now, the issue is when you want to go back from CompletedProjectsTasksScreen it will not go to ProjectTasksScreen, rather it will navigate to the previous screen of ProjectTasksScreen which is ProjectsScreen.
Is there a better solution to this problem than refactoring everything into it's screen & component?
navigation.push method instead of navigation.navigate may resolve your issue
https://reactnavigation.org/docs/navigating/#navigate-to-a-route-multiple-times
In React Native, using the following:
<StatusBar backgroundColor={config.colors.backgroundGray} barStyle="dark-content" />
works well. However when navigating to a different screen, even though the above is the only instance of StatusBar used in the entire app, the status bar style turns to what essentially is "light-content" on its own. Rendering the StatusBar component deeper in again seems to yield no results.
The backgroundColor is controllable however. Any ideas?
You can apply Statusbar's own function to App.js.
App.js
import { StatusBar } from 'react-native';
StatusBar.setBarStyle('dark-content', true);
static setBarStyle(style: StatusBarStyle, [animated]: boolean)
I'm new to React Native and I'm trying to have icons that are able to have their color changed based on json data received. I've been able to use React Native Vector Icons. However, I have my own icons that I would like to use. On the linked repo page there is something that talks about generating your own icons, but I'm not familiar enough to know how it is supposed to work. My icons are .png files and I'd like to make them so I can give them a color attribute on the fly in my app. I wanted to see what the process was to be able to do that if it was even possible. Can I use the process described in the repo?
Thanks in advance!
So, to create your own icon component, this could be a simple representation:
import React from 'react'
import { View, Image } from 'react-native'
export default class Example extends React.Component{
renderIcon = (iconName, color) => {
iconName = this.props.iconName
color = this.props.color
return<Image source={require(`/example/icons/${exampleIcon}${color}.png`)}/>
}
render(){
return(
<View>
{this._renderIcon}
</View>
)
}
}
For example, your .png Icon is called IconHomeFocused, and it's an icon of the home icon when it's focused...then you would put, in your component that you want your Icon to be in: <Example iconName = 'IconHome' color = 'Focused'/>. Of course, this requires you to name your icons carefully. I didn't want to write a million if statements so this seemed like the easiest sort of integration for me. I'm sure there are much better interpretations out there though. Good luck.
I'm not using the native navigation for my app. I have these SVGIcon that I want the user to tap and have the new page slide in from the right moving left. On that page when they tap the back, the page should slide back out to right. In other cases, I want the page to slide in from the left, or from the top, etc... Each time, the "back" button should just reverse that transition.
I found this package where I was able to get pages to slide in from the right. The issue I have is that the back button also slides the page off to the left. Here's a sample code I have doing this.
import React from 'react';
import { createTransition, SlideLeft, SlideRight } from 'react-native-transition';
const Transition = createTransition(SlideLeft);
export default class App extends React.Component {
//... some code to decide what page is CurrentScreen
render() {
return (
<Transition>
<CurrentScreen navigate={this.navigate} />
</Transition>
)
}
}
From this code, I'm not sure how I would implement SlideRight if the Transition node is already using SlideLeft. Maybe there's a better package, or a built in way to handle what I want?
Have a look at the following:
https://reactnavigation.org/docs/en/
https://github.com/fram-x/FluidTransitions
the react navigation lib is the simplest to implement, and there is a recommended community extension for fluid transitions, which would allow you to set an an appear and disappear animation:
<Transition appear='scale' disappear='bottom'>
<View style={styles.circle}/>
</Transition>
for native transitions have a look at the excellent library from the wix team: https://wix.github.io/react-native-navigation/#/third-party-libraries-support