@grean/react-native-fade

react-native-fade

Fade is a wrapper component that allows you apply a fade[in|out] effect on its render prop child
It's a full typescript component using reanimated2. You can render any component you want and any items of your choice.
The work is still in progress but you can use it and improve it if you want! PR are welcome.

Demo

Works on both iPhone and Android

Installation

Using yarn:

yarn add @grean/react-native-fade

Usage

Simply wrap a component like RN <Text> to apply a fade in/out effect when the index prop change.

const currentItemIndex = 1
const [itemIndex, setItemIndex] = useState(currentItemIndex);
const items = [itemsOfYourChoice]

//removed code for brevety

<Fade
  {...{
    index: itemIndex,
    items: profils,
  }}
>
  {(item) => //type of item inferred from Fade's items prop
    <Text>
      {item.desc}
    </Text>
  }
</Fade>

Component props

interface FadeLabelProps<T> {
  children: (item: T) => React.ReactNode // Render prop. See example above.
  containerStyle?: {
    // * <View> style prop
    // default running values that you can override:
    flex: 1,
    justifyContent: 'center',
  }
  easing: Animated.EasingFunction // Easing.bezier(0.25, 0.1, 0.25, 1)
  index: number
  items: T[] // You ca pass everything you want in an array
  timingInOut: number[], //  [300, 100]
}

Testing

See Expo example app for testing with hot-reload, you can directly modify the code's component and see how your modifications looks like immediately.

git clone https://github.com/grean/react-native-fade.git
cd react-native-fade && yarn
cd example && yarn
yarn ios

About

If you want to eat well and healthy, i recommand you to check out our mobile app Dietethic.net

License

MIT