Hello fellow programmers, i wanted to ask how can i achieve different screen rendering based on input by the user. I have done it in one way but i want to know is there any better way to do?
Attached is the link to snack on expo. You can run it and see the code of how i have done it.
If there are better alternates, please let me know.
Thankyou.
please dont mark the question as duplicate before going throught it.
For better choice you can using react-navigation https://reactnavigation.org/docs/auth-flow/ This package work in Expo
The example you posted looks mostly like something I would use conditional rendering techniques for like the && syntax
See here for more guidance:
https://reactjs.org/docs/conditional-rendering.html
If your pages are dramatically different though (not just options flipping on and off) then I would recommend react navigation as giri commented.
Related
In the image above, I would like to know which library I can use to achieve the stories on the first screen and also, which library can I use to switch between the Current News, World News, and Politics. Also is there a way to put the status progress bar on the third screen? Thanks in advance!
to achieve the news tabs, you can use react-native-tab-view, it is highly customizable and highly reliable, the second screen is what we call the Two Layered UI and can be easily achieved by using the react-native-panhandler. The third screen is an example of the react-native-pager-view. There are lot of examples of these libraries as well as extensive documentations, All the best!
I'm having some problem about a screenshot-detector in an application.
I'm using EXPO, but I've no idea about how can I detect a screenshot.
Suppose that I've a profile screen. Each user has a profile page, I want to detect when another user does a screenshot on the screen.
My problem is: how can I detect this? I readed about the gesture here, but it didn't help me. With the gestures I can detect, instead, the scroll in a page, the location x and location y.
I readed also this answer, but about the event touchesCancelled:withEvent:touchesCancelled:withEvent: I have not found anything in React Native docs (and also EXPO docs).
So: which is the idea behind a screenshot detector? Thanks for your help!
You can't do it without detaching EXPO. There is already a feature request for that.
If you decide to detach EXPO, react-native-screenshot-detector might be helpful. The solution is very similar to the one from the linked question.
Currently with expo there is no way to do that, But if you detach you can use this package it supports android&ios screenshot detecting react-native-detector
Being new to react-native, I am trying to style my input fields using react-native-elements to look similar to their example ones (Example).
Even after going through the source code for the example I still can't seem to figure out where I would start when it comes to customizing these fields to that extent.
As a heads up for anyone else looking to do the same thing, I ended up using this library to make nicer looking animated input fields. It isn't quite the same as what I had originally planned, but if you're in the same scenario as I was, I definitely recommend taking a look.
I need to build an app with little changes on layout like, logo, default colors, etc...
It's possible to acomplish that in react-native?
I think they call that product flavors on android world...
Yes it should be possible. A quick search turned up this article on git showing this exact functionality was worked on:
https://github.com/facebook/react-native/pull/6010
That being said, it looks as though the command is:
react-native run-android --flavor=free
Hope this helps!
I need to create an app using react native in both android and iOS and i'm still a newbie. So,now i need to implement a drawer like shown in the image above.I've already searched for an example or project that meets with my needs but too badly, i couldn't find anything suitable for me.So can you help me and thank you
http://2.bp.blogspot.com/-1_Fi6T2l1LY/VUfHyQlwenI/AAAAAAAAC8g/wkWN42gNaDw/s320/device-2015-05-04-101820_1.gif
You could use this library:
https://github.com/react-native-material-design/react-native-material-design
I think it can solve your problem
This RN starter has an example as well:
https://github.com/infinitered/ignite
You should not implement it from scratch yourself but instead you can use a starter project like this. If you want these animations on the drawer icon you can also check the Airbnb's Lottie.
How to implement the hamburger menu with react-native-paper:
https://callstack.github.io/react-native-paper/integrate-app-bar-with-react-navigation.html
https://medium.com/#mdeepikayadav029/side-menu-bar-after-login-screen-in-react-native-4cabee7ca2b0
At the time, this one worked for me (0.63.4). The others I found were from previous versions (0.45) and required a lot of adjustments regarding newer version implementations. No other extra files are needed except these ones after creating a unmanaged blank project:
App.js
LoginScreen.js
HeaderComponent.js
FirstScreen.js
SecondScreen.js