React Native: 2024 bona fide you need for edge mobile apps.

React Native has become the top-notch open-source UI software framework created by Meta Platforms, Inc. for mobile apps.

It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling devs to use the React framework along with native platform capabilities.

What’s React Native?

With React Native, developers leverage their JavaScript and React skills to build mobile apps, reducing time and effort.

The framework provides a set of pre-built components that are similar to those found in native iOS and Android development.

One of the key advantages of React Native is its ability to achieve near-native performance, as it allows developers to write platform-specific code when necessary to optimize performance.

Additionally, React Native offers hot reloading, enabling seeing changes in real-time as they code, speeding up the development process.

Overall, React Native has become a popular choice for mobile app development.

Effectus Software chooses it to create cross-platform apps with a single codebase while still maintaining a high level of performance and UX.

Having a robust community boosts its use and performance. Here you’ll find some of the latest:

• Documentation has been updated to reflect TypeScript as the primary language.
• Flexbox gap support has been added.
• Symlink support has been introduced, improving the workflow with monorepos and pnpm.
• In the 0.73 version, Hermes captures all console.log outputs, facilitating easier identification of app issues at startup.
• The React Native Team is developing a new debugger tool to replace Flipper.
• And, Kotlin is now the recommended language for Android apps, leaving Java behind.

What does it mean for your app?

Overall, these updates are aimed at improving the development experience, making apps more maintainable, and enhancing performance.

They encourage the use of modern programming practices and tools, which can contribute to the production of higher-quality apps.

Our React Native Projects

You can explore some of our projects here on Dribbble or visit Effectus web for more!

Some of the techniques we use in our projects are shared by our Engineers Team, this is the case of Custom Transitions in React Native.

We also posted blogs about mastering dynamics in React Native. It came as a solution for 2 problems we were having:

So we have 2 problems here.

A) Camera problem: If we were to pause rendering on the primary view to switch to rendering on the secondary view, it would stop the ongoing recording process – a scenario we aim to avoid.

B) Map problem: The user could drag the map to move around, but also drag the secondary view, to move it anywhere. Hence, we needed to manage the same user gesture (drag) that had different actions based on whether the map was the primary or secondary view.

And last, but not least… It’s new architecture!

Let’s code!

Custom transitions, a configuration which just fades the screen looks like this:

<Stack.Screen
        name="List"
        options={{
          cardStyleInterpolator: ({current}) => ({
            cardStyle: {
              opacity: current.progress,
            },
          }),
        }}>

        {props => <ListScreen {...props} index={index} setIndex={setIndex} />}

 </Stack.Screen>

You can leverage the CardStyleInterpolators from @react-navigation/stack to streamline your transition animations. Here’s a quick example of how to implement it:

import { CardStyleInterpolators } from '@react-navigation/stack';

// …
<Stack.Screen
        name="List"
        options={{
          cardStyleInterpolator:
            CardStyleInterpolators.forScaleFromCenterAndroid,
        }}>

        {props => <ListScreen {...props} index={index} setIndex={setIndex} />}

</Stack.Screen>

Create draggable views in React Native

According to the official React Native documentation, to make a view draggable, we can use PanResponder. Additionally, we have to use the <Animated.View /> component to apply the ‘x’ and ‘y’ properties provided by PanResponder.

const pan = useRef(new Animated.ValueXY()).current;

const panResponder = useRef(
  PanResponder.create({
    onMoveShouldSetPanResponder: () => true,
    onPanResponderGrant: () => {
      pan.setOffset({
        x: pan.x._value,
        y: pan.y._value,
      });
    },
    onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }], {
      useNativeDriver: false,
    }),
    onPanResponderRelease: () => {
      pan.flattenOffset();
    },
  }),
).current;

<Animated.View
  style={{
    transform: [{ translateX: pan.x }, { translateY: pan.y }],
  }}
  {...panResponder.panHandlers}
>
  <View style={styles.box} />
</Animated.View>;

Let’s round up

So, react native is here to stay and slay!

All in all, optimizing React Native’s use is essential to creating a fast, responsive, and user-friendly mobile app. Here you’ll find more tips.

Go browse our blog and Instagram for improving optimization: Splash Screens in React, animations, vision camera, video, image picker, vector icons and maps!

Keep on reading our latest for more and comment, remember: Sharing is Caring!