Skip to main content
Version: 4.0.0-beta.0

Migration from v3 to v4

Table of Contents​

What's New?​

React Native Elements v4 introduces many features including few new components, fully typescript support and some breaking changes whose migration is being given below.

Migration to Functional​

These components are converted to Functional Components,

  • Button
  • Slider
  • Tooltip
  • Image

Why?​

How would it affect?​

ref may not work as of now, but would be added in future releases.

Migration to Pressable​

The Reason​

note

Earlier React Native Elements was using Touchable as touch handler, but since v4.0 will use Pressable

Tests migrated to React Native Testing library​

Handling breaking changes​

Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.

This change would let you use onPressIn & onPressOut APIs in RNE components, For example

  <CheckBox
    title="I agree"
+   onPressIn={()=>{}}
+   onPressOut={()=>{}}
    onPress={() => {}}
  />

and the rest of props for Pressable can be added via pressableProps API

  <ButtonGroup
+   pressableProps={{android_ripple:{radius:2}}}
  />
info

Button Component still uses Touchable, As Pressable works differently compared to TouchableNativeFeedback, for instance, the Button will apply the primary color as the button background color, however, the pressable ripple effect will then render behind the button, which results in no ripple.

Tooltip​

Tooltip is one of core component of RNE, Since v4 this component would be stateless and would use visible, onOpen & onClose Props for its working

  <Tooltip
+   visible={open}
+   onOpen={() => {
+      setOpen(true);
+   }}
+   onClose={() => {
+      setOpen(false);
+   }}
    popover="Hey All"
  />

You can still use Tooltip as stateful component by doing:

const ControlledTooltip: React.FC<TooltipProps> = (props) => {
  const [open, setOpen] = React.useState(false);
  return (
    <Tooltip
      visible={open}
      onOpen={() => {
        setOpen(true);
      }}
      onClose={() => {
        setOpen(false);
      }}
      {...props}
    />
  );
};

Text​

variant can be => h1 h2 h3 h4 caption props

  <Text
-  h1
-  h1style={{}}
+  variant="h1"
   style={{}}
  />