react-native-screens
react-native-viewpager
Our great sponsors
react-native-screens | react-native-viewpager | |
---|---|---|
9 | 14 | |
2,827 | 2,457 | |
2.1% | 2.8% | |
8.9 | 7.5 | |
3 days ago | 20 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react-native-screens
- Updated from 0.68 to 0.71.11 : getting random crashs without error logs on Android
-
The different strategies to building a cross-platform app
react-native-url-router (a single navigation system, using React Router + react-native-screens for stacks + react-native-pager-viewfor tabs).
-
Is it bad to replace default navigation header with a top aligned view for one screen?
Sure. Here is an example of what I'm talking about on github.
-
App crashes everytime I open it
FATAL EXCEPTION: main Process: web.tradenewton.com, PID: 13063 java.lang.RuntimeException: Unable to start activity ComponentInfo{web.tradenewton.com/web.tradenewton.com.MainActivity}: androidx.fragment.app.Fragment$InstantiationException: Unable to instantiate fragment com.swmansion.rnscreens.ScreenStackFragment: calling Fragment constructor caused an exception at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3616) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3780) at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:85) at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135) at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2251) at android.os.Handler.dispatchMessage(Handler.java:106) at android.os.Looper.loop(Looper.java:233) at android.app.ActivityThread.main(ActivityThread.java:8063) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:631) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:978) Caused by: androidx.fragment.app.Fragment$InstantiationException: Unable to instantiate fragment com.swmansion.rnscreens.ScreenStackFragment: calling Fragment constructor caused an exception at androidx.fragment.app.Fragment.instantiate(Fragment.java:631) at androidx.fragment.app.FragmentContainer.instantiate(FragmentContainer.java:57) at androidx.fragment.app.FragmentManager$3.instantiate(FragmentManager.java:483) at androidx.fragment.app.FragmentStateManager.(FragmentStateManager.java:85) at androidx.fragment.app.FragmentManager.restoreSaveState(FragmentManager.java:2728) at androidx.fragment.app.FragmentController.restoreSaveState(FragmentController.java:198) at androidx.fragment.app.FragmentActivity$2.onContextAvailable(FragmentActivity.java:149) at androidx.activity.contextaware.ContextAwareHelper.dispatchOnContextAvailable(ContextAwareHelper.java:99) at androidx.activity.ComponentActivity.onCreate(ComponentActivity.java:297) at androidx.fragment.app.FragmentActivity.onCreate(FragmentActivity.java:273) at androidx.appcompat.app.AppCompatActivity.onCreate(AppCompatActivity.java:115) at com.facebook.react.ReactActivity.onCreate(ReactActivity.java:44) at android.app.Activity.performCreate(Activity.java:8006) at android.app.Activity.performCreate(Activity.java:7990) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1329) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3589) ... 11 more Caused by: java.lang.reflect.InvocationTargetException at java.lang.reflect.Constructor.newInstance0(Native Method) at java.lang.reflect.Constructor.newInstance(Constructor.java:343) at androidx.fragment.app.Fragment.instantiate(Fragment.java:613) ... 26 more Caused by: java.lang.IllegalStateException: Screen fragments should never be restored. Follow instructions from https://github.com/software-mansion/react-native-screens/issues/17#issuecomment-424704067 to properly configure your main activity. at com.swmansion.rnscreens.ScreenFragment.(ScreenFragment.kt:41) at com.swmansion.rnscreens.ScreenStackFragment.(ScreenStackFragment.kt:30) ... 29 more
- How can I achieve this animated header effect? Iβm using react-navigation if that helps.
-
My react Native app keeps closing when I navigate back to it from another app
ItΒ΄s very likely you are using react-native-screens and you forgot to updat the onCreate method. Just make sure you're onCreate method looks like this
-
React Navigation 6 (prerelease) is here
Not yet, you can open an issue in react-native-screens repo and follow these issues: https://github.com/software-mansion/react-native-screens/issues/561 https://github.com/software-mansion/react-native-screens/issues/317
- How to change screen background while in transition with react-navigation v5?
-
Just published our second RN App to the App Store. React Native only gets better with practice.
I LOVE the large title header behavior of the native-stack on iOS. I really wish the folks at RNav would implement something like that in a future release (I had rebuilt the large header from the ground up on our first app using Animated). As it stands, I am 90% sure I want to implement it on Words β but other features / fixes come first!
react-native-viewpager
- what are the three dots called that indicate a user can swipe in a react-native Android app?
-
How to implement this swipe?
https://github.com/callstack/react-native-pager-view π
-
What is this horizontal scrollable tab control called?
This is basically the one endorsed on react native's official docs and seems to support new architecture https://github.com/callstack/react-native-pager-view
-
Page Transition
'react-native-pager-view' -link- has support for for "curl" animation (iOS only at the moment)
-
The different strategies to building a cross-platform app
react-native-url-router (a single navigation system, using React Router + react-native-screens for stacks + react-native-pager-viewfor tabs).
-
react-native-snap-carousel is very lagy for large data
I think you should use https://github.com/callstack/react-native-pager-view. On android and on ios it works a little differently, but in general it has good performance due to the use of native code.
-
What are these called?
I think you looking for react native pager view Library, it's used to build tabs like that in react native, https://github.com/callstack/react-native-pager-view
-
How to implement walkthrough screens?
If you just want to swipe through some onboarding screens, probably the best maintained library for the job is react native pager view. Lots of great examples in the repo.
-
How would one go about implementing the reddit swipe gesture navigation to swipe between posts? I understand that the main feed could be a flatlist and tapping on a post navigates the user to a new screen. But how could one then swipe between posts?
Are you refering to this? Also, could you maybe tell me how the pager will work with a flat list comprising of a large number of posts (like reddit)?
- TikTok style side swipe?
What are some alternatives?
create-t3-turbo - Clean and simple starter repo using the T3 Stack along with Expo React Native
react-native-onboarding-swiper - π³ Delightful onboarding for your React-Native app
react-native-collapsible-tab-view - A cross-platform Collapsible Tab View component for React Native
react-native-dots-pagination - A simple dot paging for React Native.
react-native-shared-group-preferences
NativeBase - Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
react-native-iap - react-native native module for In App Purchase.
react-native-walkthrough-tooltip - An inline wrapper for calling out React Native components via tooltip
hackerweb-native-2 - HackerWeb 2: A read-only Hacker News client.
viewpagerdots - π Simple, compact Kotlin library for ViewPager page indicators.
rn_drawertabnav_boilerplate - React Native boilerplate with Drawer and Bottom Tab Navigation
expo-auto-navigation - Test automatic navigation using Expo and React Navigation