3 Recent React Native Development Notes
I’ve often missed writing consistently due to a busy schedule, so I’ve decided to start a weekly series titled “Weekly Development Activity Briefing.” In this series, I plan to address the challenges faced during development each week.
Currently, my primary focus is on React Native development, so most of the content will revolve around that. For this week, I’ll briefly cover three key issues.
First, let’s address the issue related to the KeyExtractor in FlashList.
The issue occurs intermittently when using FlashList and seems to resurface with each new development cycle.
To briefly explain the issue: when using FlashList, if you scroll quickly through a list that has pagination applied, you may encounter a warning about a possible stableId collision.
<FlashList
data={data}
keyExtractor={(item: any, i: number) => `${i}-${item.title}`}
renderItem={({item}) => (
<View
style={css`
padding: 16px;
`}
>
<Typography.Body2>{item.title}</Typography.Body2>
</View>
)}
estimatedItemSize={10}
/>The issue can be easily resolved by using useCallback.
This issue appears to be a typical concurrency problem in React, so I addressed it as follows:
Secondly, there is an issue related to the Android debug keystore.
When implementing features like Google login in React Native, it’s crucial to thoroughly test in a debug environment before moving to production. Typically, developers with Android experience know that on macOS, the debug keystore can be found in the ~/.android directory. I’ve repeatedly made the same mistake of overlooking this, often encountering “Developer Error” as a result. Each time, I had to rely on recalling past experiences to resolve the issue.
Typically, when you create an Android project in React Native, a debug.keystore is generated within the app directory. You need to extract the SHA-1 value from this keystore and add it to your social provider's dashboard to ensure that social logins and other features work correctly in the testing environment.
Thirdly, there is an issue related to the new architecture on Android.
After applying the new architecture and adding a Pressable button to the headerLeft in expo-router to navigate back, I found that it didn’t work as expected. Upon investigating, I discovered that this issue is related to react-native-screens. Interestingly, while onPress doesn’t work, pressIn does trigger the action. Additionally, this issue only occurs on physical devices; the button works fine on the emulator.
For now, it seems that using RectButton from react-native-gesture-handler can resolve the issue. If you found this helpful, I’ll continue to post these weekly briefing series. If you prefer to read the articles in Korean, please subscribe to the CrossPlatform-Korea YouTube channel.
