React-native-flying-objects NPM

react-native-flying-objects

DESCRIPTION

Preview
preview "reaction button" code from my expo base project

flying objects package for react native

this library based on Animated.View and Easing

INSTALLATION

npm install --save react-native-flying-objects

HOW TO USE

import react-native-flying-objects.

import { FlyingView } from 'react-native-flying-objects';

add properties for modify FlyingView.

manage state for flying objects

const [object, setObject] = useState<ObjectConfig[]>([]);
// manage every rendering objects

when you want to add object just add more state

setObject((prev) => [...prev, { object: <Text>hello</Text> }]);
// the new object added
// text "hello" will be the object that flying

add FlyingView where you want to use.

return (
  <FlyingView
    object={object}
    containerProps={{ style: { borderWidth: 2, borderColor: 'black' } }}
  />
);

result
Demo code in my github

PROPERTIES

FlyIngView

Property	required	Type	Description	DefaultValue
object	true	ObjectConfig	list of objects managed by container.	undefined
containerProps	false	React-native.ViewProps	Props for the container in which the object floats.	`{pointerEvents:"none",style={{width:50,height:120}}}`

ObjectConfig

Property	required	Type	Description	DefaultValue
object	true	React.ReactNode	the object that flies on FlyingView	-
right	false	AnimatedPosition	animated value for position right of object on container	`{fromValue: 0,toValue: 0,duration: 1200, delay: 0,}`
top	false	AnimatedPosition	animated value for position top of object on container	`{fromValue: 100,toValue: 35,duration: 1200,easing: Easing.bezier(0.5, 1.0, 0.5, 1.0),delay: 0,}`
show	false	AnimatedOpacity	animated opacity value when object appears	`{duration: 500,delay: 0,}`
hide	false	AnimatedOpacity	animated opacity value when object disappears	`{duration: 500,delay: 0,}`

TYPES

types for use FlyingView

interface AnimatedPosition {
  fromValue?: number;
  toValue?: number;
  duration?: number;
  easing?: ((value: number) => number) | undefined;
  delay?: number;
}

interface AnimatedOpacity {
  duration?: number;
  easing?: ((value: number) => number) | undefined;
  delay?: number;
}

interface ObjectConfig {
  object: React.ReactNode;
  right?: AnimatedPosition;
  top?: AnimatedPosition;
  show?: AnimatedOpacity;
  hide?: AnimatedOpacity;
}

// easing from react-native