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.
Related
I need to use a callback function for the mouse click event. Below code is working in React web app:
const checkAnswer = (e: React.MouseEvent<HTMLButtonElement>) => {
const answer = e.currentTarget.value // here .value property is undefined and gives error in React-Native. Just e.currentTarget is defined.
const correct = questions[number].correct_answer === answer
if(correct) setScore(prev => prev + 1)
}
But I couldn't apply it on React Native (mobile) for Pressable or TouchableOpacity.
This is the render part of React web app's code:
<button value={answer} onClick{checkAnswer} />
and I try to apply it on React Native. The value will be passed to button's value. But there is no "value" option in native's Pressable component. Therefore I am confused
Any help?
you can determine touch events by following
<View onTouchStart={(e) => {console.log('touchMove',e.nativeEvent)}} />
Here is some similar scenario what I could able to understand from the question.
There is a Score state which will store the user's score of a quiz game.
There is a array of question where all the options and correct option are given.
There will be a button for the option, if user choose a option, and based on that it will validate if user is correct or not.
It might not be the exact scenario of you. But this could definitely help to solve your scenario.
Here is a solution for the scenario => solution.
If you click on the solution link you will be redirect to a page which is similar to the screenshot attached below. On very right you will find "My Device", "Android", "ios", choose any and run. Run via "my device" with expo app installed in your mobile if you don't want to be in queue for some certain time.
Note: from your code this is for React web:
<button value={answer} onClick{checkAnswer} />
but in React Native you have to use a click event like this:
<TouchableOpacity onPress={()=>buttonHandler()}></TouchableOpacity>
Here ()=> and () extra need to be added to work a function properly.
Also instead of .map() function you can use FlatList to improve your app. FlatList support lazy loading.
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
So I have a this.state.comments in my Home Screen and that's an array. In my other screen called Comments Screen I'd like to show the results of that state. Aka id like to use that array I mean this.state.comments and display it in a FLATLIST in Comments screen. That file Comments Screen just has one function and inside it a flatlist. Any help?
in Home use this.props.navigation.navigate('Comments',{comments: this.state.comments})
and in Comments screen if using react-navigation v4 use :
const commentsArray = this.props.navigation.getParam('comments')
if using react-navigation v5 use :
const commentsArray = this.props.route.params.comments;
As a response to your comment with the picture, if Komentar is a screen that is added in the navigation configuration you do:
const Komentar = (props) =>{
const commentsArray = props.navigation.getParam('comments');
return(
// your code here
)}
because it's a functional component you can't use this to access props.
I want to open drawer with touching anywhere on screen.I tried with minSwipeDistance property of drawer navigator.Although I didn't get error It didn't work.How should I implement this process into my code? If anyone knows help me please! Thanks in advance!
For React Navigation V5
put this to take the device width
function ProfileDrawer() {
const dimensions = useWindowDimensions();
and edgeWidth is what you want I think
<Drawer.Navigator initialRouteName="Profile"
edgeWidth={dimensions.width}
>
You can check the Official Page to see detail for DrawerNavigator:
https://reactnavigation.org/docs/drawer-navigator#props
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.