I need to create an animation with an image that will circle around another image. I have already tried to use suggestions from a similar question like Animate a Circle around another circle , but unfortunately it didn't help. I tried looking into 3rd party modules that would offer the desirable functionality, but haven't found something that would fit my need.
I found a helpful article to understand the circular motion in JavaScript, however I have a hard time to replicate it in React Native animation. I believe I simply have a hard time understanding a proper usage of Animated API and transform style properties when it comes to animating circular movement.
<View style={animationContainer}>
<Image
source={require('./images/image.png')}
style={image}
/>
<Animated.Image
source={require('./images/icon.png')}
style={circlingIcon}
/>
</View>
I have posted a similar butter smooth solution for the question react native circle transform translate animation
Full code:
import React, {Component} from 'react';
import {View, Text, Animated, StyleSheet, Easing} from 'react-native';
export default class Circle extends Component {
constructor() {
super();
this.animated = new Animated.Value(0);
var inputRange = [0, 1];
var outputRange = ['0deg', '360deg'];
this.rotate = this.animated.interpolate({inputRange, outputRange});
outputRange = ['0deg', '-360deg'];
this.rotateOpposit = this.animated.interpolate({inputRange, outputRange});
}
componentDidMount() {
this.animate();
}
animate() {
Animated.loop(
Animated.timing(this.animated, {
toValue: 1,
duration: 4000,
useNativeDriver: true,
easing: Easing.linear,
}),
).start();
}
render() {
const transform = [{rotate: this.rotate}];
const transform1 = [{rotate: this.rotateOpposit}];
return (
<View style={styles.container}>
<Animated.View style={[styles.item, {transform}]}>
<Animated.View style={[styles.topItem, {transform: transform1}]}>
<Text style={styles.text}>Test</Text>
</Animated.View>
</Animated.View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
item: {
position: 'absolute',
width: 100,
height: 200, // this is the diameter of circle
},
topItem: {
width: '100%',
height: 20,
backgroundColor: 'red',
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
},
text: {
color: '#fff',
},
});
I hope it will help you..
I have taken a solution from a question react native circle transform translate animation and refactored it a little by separating interpolation of coordinates over Y and X in two different functions.
interface InterpolatedMotion {
translateX: Animated.Value;
translateY: Animated.Value;
}
interface AnimatedIcon extends InterpolatedMotion {
animated: Animated.Value;
}
interface State {
icon: AnimatedIcon;
}
const defaultAnimatedIcon = (animatedValue: number): AnimatedIcon => ({
animated: new Animated.Value(animatedValue),
translateX: new Animated.Value(0),
translateY: new Animated.Value(0),
});
export class Animation extends PureComponent<Props, State> {
state = {
icon: defaultAnimatedIcon(0),
}
constructor(props) {
super(props);
let { icon } = this.state;
icon.animated.setValue(0);
const snapshot = 50;
const radius = 200;
const inOutX = this.interpolateCircularMotionOverX(snapshot, radius);
icon.translateX = coins.animated.interpolate(inOutX);
const inOutY = this.interpolateCircularMotionOverY(snapshot, radius);
icon.translateY = coins.animated.interpolate(inOutY);
}
componentWillMount(): void {
this.startAnimation();
}
startAnimation = (): void => {
let { icon } = this.state;
icon.animated.setValue(0);
let animations = [
Animated.timing(
icon.animated,
{
toValue: 1,
duration: 8000,
easing: Easing.linear,
},
),
];
Animated.loop(
Animated.parallel(animations),
).start(() => {
icon.animated.setValue(0);
});
}
interpolateCircularMotionOverX = (snapshot: number, radius: number) => {
const inputRange = [];
const outputRange = [];
for (let i = 0; i <= snapshot * 2; ++i) {
const value = i / snapshot;
const move = Math.sin(value * Math.PI * 2) * radius;
inputRange.push(value);
outputRange.push(move);
}
return { inputRange, outputRange };
}
interpolateCircularMotionOverY = (snapshot: number, radius: number) => {
const inputRange = [];
const outputRange = [];
for (let i = 0; i <= snapshot * 2; ++i) {
const value = i / snapshot;
const move = -Math.cos(value * Math.PI * 2) * radius;
inputRange.push(value);
outputRange.push(move);
}
return { inputRange, outputRange };
}
render(): JSX.Element {
const { icon } = this.state;
const transformIcon = [
{ translateY: icon.translateY },
{ translateX: icon.translateX },
];
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View style={{ flex: 1 }}>
<Animated.Image
source={require('./images/coins.png')}
style={[Styles.forms.circlingIcon, { transform: transformCoins }]}
/>
</View>
</View>
);
}
This has helped me by providing a flexible and reusable solution for any future instances of circular animation.
Related
It might sound silly but I am just learning here
I am trying to convert a component to a function-based component. I did everything right but I am stuck on something very silly
I have this code for Discover
export default class Discover extends React.PureComponent {
state = {
items: [],
};
cellRefs: {};
constructor(props) {
super(props);
this.cellRefs = {};
}
what is the correct way to convert cellRefs to work with the function I have? I tried everything when I do this in my class file it is fine it gives me an object with the things I need.
const cell = this.cellRefs[item.key];
However,
const cell = cellRefs[item.key];
is just giving undefined
Full code for the converted component
import React, { useState, useEffect, useRef, Children } from 'react';
import {
StyleSheet,
Text,
View,
FlatList,
Dimensions,
TouchableOpacity,
Image,
} from 'react-native';
import { Video } from 'expo-av';
const { height, width } = Dimensions.get('window');
const cellHeight = height * 0.6;
const cellWidth = width;
const viewabilityConfig = {
itemVisiblePercentThreshold: 80,
};
class Item extends React.PureComponent {
video: any;
componentWillUnmount() {
if (this.video) {
this.video.unloadAsync();
}
}
async play() {
const status = await this.video.getStatusAsync();
if (status.isPlaying) {
return;
}
return this.video.playAsync();
}
pause() {
if (this.video) {
this.video.pauseAsync();
}
}
render() {
const { id, poster, url } = this.props;
const uri = url + '?bust=' + id;
return (
<View style={styles.cell}>
<Image
source={{
uri: poster,
cache: 'force-cache',
}}
style={[styles.full, styles.poster]}
/>
<Video
ref={ref => {
this.video = ref;
}}
source={{ uri }}
shouldPlay={false}
isMuted
isLooping
resizeMode="cover"
style={styles.full}
/>
<View style={styles.overlay}>
<Text style={styles.overlayText}>Item no. {id}</Text>
<Text style={styles.overlayText}>Overlay text here</Text>
</View>
</View>
);
}
}
interface FeedListProps {
}
export const FeedList: React.FC<FeedListProps> = (props) => {
const initialItems = [
{
id: 1,
url: 'https://s3.eu-west-2.amazonaws.com/jensun-uploads/shout/IMG_1110.m4v',
poster:
'https://s3.eu-west-2.amazonaws.com/jensun-uploads/shout/norwaysailing.jpg',
},
{
id: 2,
url:
'https://s3.eu-west-2.amazonaws.com/jensun-uploads/shout/croatia10s.mp4',
poster:
'https://s3.eu-west-2.amazonaws.com/jensun-uploads/shout/croatia10s.jpg',
},
];
const [items, setItems] = useState([]);
//this.cellRefs = {};
//let cellRefs: {};
//cellRefs= {};
const cellRefs = React.useRef({})
const viewConfigRef = React.useRef({ itemVisiblePercentThreshold: 80 })
useEffect(() => {
loadItems();
setTimeout(loadItems, 1000);
setTimeout(loadItems, 1100);
setTimeout(loadItems, 1200);
setTimeout(loadItems, 1300);
}, []);
const _onViewableItemsChanged = React.useRef((props)=>{
const changed = props.changed;
changed.forEach(item => {
const cell = cellRefs[item.key];
console.log("CALLING IF"+ cell + " " + item.key)
if (cell) {
if (item.isViewable) {
console.log("PLAY OS CALLED")
cell.play();
} else {
console.log("Pause is played")
cell.pause();
}
}
});
});
function loadItems(){
const start = items.length;
const newItems = initialItems.map((item, i) => ({
...item,
id: start + i,
}));
const Litems = [...items, ...newItems];
setItems( Litems );
};
function _renderItem({ item }){
return (
<Item
ref={cellRefs[item.id]}
{...item}
/>
);
};
return (
<View style={styles.container}>
<FlatList
style={{ flex: 1 }}
data={items}
renderItem={_renderItem}
keyExtractor={item => item.id.toString()}
onViewableItemsChanged={_onViewableItemsChanged.current}
initialNumToRender={3}
maxToRenderPerBatch={3}
windowSize={5}
getItemLayout={(_data, index) => ({
length: cellHeight,
offset: cellHeight * index,
index,
})}
viewabilityConfig={viewabilityConfig}
removeClippedSubviews={true}
ListFooterComponent={
<TouchableOpacity onPress={loadItems}>
<Text style={{ padding: 30 }}>Load more</Text>
</TouchableOpacity>
}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
cell: {
width: cellWidth - 20,
height: cellHeight - 20,
backgroundColor: '#eee',
borderRadius: 20,
overflow: 'hidden',
margin: 10,
},
overlay: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: 'rgba(0,0,0,0.4)',
padding: 40,
},
full: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
},
poster: {
resizeMode: 'cover',
},
overlayText: {
color: '#fff',
},
});
Should be enough to use a functional component and use useRef([]) initialized as an array
Working example:
https://snack.expo.io/2_xrzF!LZ
It would be best if you could inline your source code into stack overflow, than keeping it in a separate link. However I took a look at the component, and I think the issue is with how you are using props.
On line 91,
export const FeedList: React.FC<FeedListProps> = ({}) => {
So here, you need to get the props as an argument. Earlier with the class component it was available at this.props. However here you need to pass it as below,
export const FeedList: React.FC<FeedListProps> = (props) => {
Or you may destructure the props as below,
export const FeedList: React.FC<FeedListProps> = ({changed}) => {
You will also need to modify the interface on line 87 to reflect the type.
I'm using the react-native-circular-progress component and I'm trying to loop an animation every 30 seconds.
i.e the animation is 30 seconds long and i want it to restart as soon as its done
The component exposes a function named reAnimate which I have put in a setInterval function as soon as the component mounts.
import React from 'react';
import { StyleSheet, Text, View,Dimensions, Easing } from 'react-native';
import { AnimatedCircularProgress } from 'react-native-circular-progress';
const MAX_POINTS = 30;
export default class App extends React.Component {
state = {
isMoving: false,
pointsDelta: 0,
points: 1,
};
componentDidMount(){
setInterval(
() => this.circularProgress.reAnimate(0,100, 30000,Easing.linear),
30000
);
}
render() {
const { width } = Dimensions.get("window");
const window = width - 120;
const fill = (this.state.points / MAX_POINTS) * 100;
return (
<View style={styles.container} >
<AnimatedCircularProgress
size={window}
width={7}
backgroundWidth={5}
fill={0}
tintColor="#ef9837"
backgroundColor="#3d5875"
ref={(ref) => this.circularProgress = ref}
arcSweepAngle={240}
rotation={240}
lineCap="round"
>
{fill => <Text style={styles.points}>{Math.round((MAX_POINTS * fill) / 100)}</Text>}
</AnimatedCircularProgress>
</View>
);
}
}
const styles = StyleSheet.create({
points: {
textAlign: 'center',
color: '#ef9837',
fontSize: 50,
fontWeight: '100',
},
container: {
flex: 1,
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#0d131d',
padding: 50,
},
pointsDelta: {
color: '#4c6479',
fontSize: 50,
fontWeight: '100',
},
pointsDeltaActive: {
color: '#fff',
},
});
This is working... BUT... the animation only starts 30s after the component mounts. How do i get it to loop immediately?
Any help will be greatly appreciated.
Thank you.
The reason is setInterval will not fire immediately it will start after the duration you passed i.e 30 mins, So all you have to do is make a call initially before setting the interval, also don't forget to clear the interval.
Here's how I would it:
componentDidMount(){
this.circularProgress.animate(100, 30000,Easing.linear);
this.intervalId = setInterval(
() => this.circularProgress.reAnimate(0,100, 30000,Easing.linear),
30000
);
}
componentWillUnmount() {
clearInterval(this.intervalId);
}
Im new to react-native and Im building an app to play sounds on button press and I couldnt achieve this, is it because of errors in my code ? Also pls suggest the solution for playing the sounds and suggest the corrections
Here's my code:
import React, { Component } from 'react';
import { StatusBar, Dimensions, Image, TouchableWithoutFeedback, Animated } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Sound from 'react-native-sound';
const a = require('./Images/landing-bnt1-on.png');
const b = require('./Images/landing-bnt1.png');
const c = require('./Images/landing-bnt2-on.png');
const d = require('./Images/landing-bnt2.png');
const btnSound = new Sound('./Sounds/btn_sound.mp3');
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
class MainScreen extends Component {
state = {
computerPressed: false,
teamPressed: false
}
componentWillMount() {
this.slide1 = new Animated.Value(0);
this.slide2 = new Animated.Value(0);
this.bnt1();
this.bnt2();
}
bnt1() {
Animated.timing(
this.slide1, {
delay: 100,
toValue: w / 1.161,
duration: 300,
}
).start();
}
bnt2() {
Animated.timing(
this.slide2, {
delay: 300,
toValue: w / 1.161,
duration: 300,
}
).start();
}
render() {
return (
<Image
source={require('./Images/bg_img.png')}
style={styles.backgroundStyle} >
<StatusBar hidden />
<Image
source={require('./Images/History.png')}
style={styles.historybuttonStyle} />
<Image
source={require('./Images/logo_ws.png')}
style={styles.logoStyle} />
<TouchableWithoutFeedback
onPress={() => {
btnSound.play();
Actions.screen2({ challenge: 'Computer' });
}
}
onPressIn={() => {
this.setState({ computerPressed: true });
}
}
onPressOut={() => {
this.setState({ computerPressed: false });
}
} >
<Animated.Image
source={this.state.computerPressed ? a : b}
style={[styles.landingbnt1Style, { transform: [{ translateX: this.slide1 }] }]} />
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
onPress={() => {
Actions.screen2({ challenge: 'Team' });
}
}
onPressIn={() => {
this.setState({ teamPressed: true });
}
}
onPressOut={() => {
this.setState({ teamPressed: false });
}
} >
<Animated.Image
source={this.state.teamPressed ? c : d}
style={[styles.landingbnt2Style, { transform: [{ translateX: this.slide2 }] }]} />
</TouchableWithoutFeedback>
</Image>
);
}
}
const styles = {
backgroundStyle: {
flex: 1,
width: w,
height: h,
flexWrap: 'wrap',
position: 'relative'
},
logoStyle: {
width: w,
height: h,
resizeMode: 'contain',
position: 'absolute',
bottom: h / 15
},
historybuttonStyle: {
width: w / 7.5,
height: h / 14,
right: (w / 20),
top: (h / 40),
position: 'absolute'
},
landingbnt1Style: {
width: w / 1.44,
height: h / 13.14,
top: h / 1.41,
left: -(w / 1.44)
},
landingbnt2Style: {
width: w / 1.44,
height: h / 13.14,
top: h / 1.35,
left: -(w / 1.44)
}
};
export default MainScreen;
It may not be the correct way of using react-native-sound it is because i couldnt find an example it would be better I someone also share their codes using react-native-sound
You can't load the sound from any directories. You have to Save your sound clip files under the directory android/app/src/main/res/raw for android and for ios Open Xcode and add your sound files to the project (Right-click the project and select Add Files to [PROJECTNAME])
You can find the detail docs for this at the link below :-
Basic Usage
and for theworking example for this you can check code in the link below :-
Example demo
I hope this is what you are looking for :)
I've looked through many other threads with this same issue, but none seem to have the solution I'm looking for. I followed a tutorial off of YouTube (Fullstack Development is the channel, and it is how to make a game in 28 minutes). My main code looks like this:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Dimensions,
Animated,
Image,
} from 'react-native';
import Enemy from './app/components/Enemy';
export default class Blox extends Component {
constructor(props){
super(props);
this.state = {
movePlayerVal: new Animated.Value(40),
playerSide:'left',
points: 0,
moveEnemyVal: new Animated.Value(0),
enemyStartposX: 0,
enemySide: 'left',
enemySpeed: 4200,
gameOver: false,
};
}
render() {
return (
<Image source = {require('./app/img/bg.png')} style={styles.container}>
<View style= {{ flex:1, alignItems: 'center', marginTop: 80 }}>
<View style={styles.points}>
<Text style={{ fontWeight: 'bold', fontSize: 40 }}>{this.state.points}</Text>
</View>
</View>
<Animated.Image source={require('./app/img/car.png')}
style = {{
height:100,
width:100,
position:'absolute',
zIndex:1,
bottom: 50,
resizeMode: 'stretch',
transform: [
{ translateX: this.state.movePlayerVal }
]
}}></Animated.Image>
<Enemy enemyImg={require('./app/img/enemy.png')}
enemyStartposX={this.state.enemyStartposX}
moveEnemyVal={this.state.moveEnemyVal} />
<View style={styles.controls}>
<Text style = {styles.left} onPress={ () => this.movePlayer('left') }> {'<'} </Text>
<Text style={styles.right} onPress={ () => this.movePlayer('right') }> {'>'} </Text>
</View>
</Image>
);
}
movePlayer(direction) {
//move player right
if (direction == 'right') {
this.setState({ playerSide: 'right' }); //issue with setState being used as a function (from lines 78-124)
Animated.spring(
this.state.movePlayerVal,
{
toValue: Dimensions.get('window').width = 140,
tension: 120,
}
).start();
} else if (direction == 'left') {
this.setState({ playerSide: 'left' });
Animated.spring(
this.state.movePlayerVal,
{
toValue: 40,
tension: 120,
}
).start();
}
}
componentDidMount() {
this.animateEnemy();
}
animateEnemy() {
this.state.moveEnemyVal.setValue(-100);
var windowH = Dimensions.get('window').height;
//Generate left distance for enemy
var r = Math.floor(Math.random() * 2) * 1;
if (r == 2) {
r = 40;
this.setState({ enemySide: 'left' });
} else {
r = Dimensions.get('window').width = 140;
//Enemy is on the right
this.setState = ({ enemySide: 'right' });
}
this.setState({ enemyStartposX: r }); //issue with this
//Interval to check for collision each 50 ms
var refreshIntervalId;
refreshIntervalId = ( () => {
//Collision logic
//If enemy collides with player and they are on the same side
//and the enemy has not passed the player safely
if (this.state.moveEnemyVal._value > windowH - 280 && this.state.moveEnemyVal._value < windowH -180 && this.state.playerSide == this.state.enemySide) {
clearInterval(refreshIntervalId)
this.setState({ gameOver: true });
this.gameOver();
}
}, 50);
//Increase enemy speed each 20th second
setInterval ( () => {
this.setState({ enemySpeed: this.state.enemySpeed - 50 })
}, 20000);
//Animate the enemy
Animated.timing(
this.state.moveEnemyVal,
{
toValue: Dimensions.get('window').height,
duration: this.state.enemySpeed,
}
).start(event => {
//if no enemy collision is detected, restart enemy animation
if (event.finished && this.state.gameOver == false) {
clearInterval(refreshIntervalId);
this.setState({ points: ++this.state.points });
this.animateEnemy();
}
});
}
gameOver() {
alert('You lost big time!');
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
position: 'relative',
resizeMode: 'cover',
},
points: {
width: 80,
height: 80,
backgroundColor: '#fff',
borderRadius: 100,
alignItems: 'center',
justifyContent: 'center',
},
controls: {
alignItems: 'center',
flexDirection: 'row',
},
right: {
flex: 1,
color: '#fff',
margin: 0,
fontSize: 60,
fontWeight: 'bold',
textAlign: 'left'
},
left: {
flex: 1,
color: '#fff',
fontSize: 60,
fontWeight: 'bold',
textAlign: 'right'
},
});
I also have an enemy class that looks like this:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Animated,
Image,
} from 'react-native';
export default class Enemy extends Component {
render() {
return (
<Animated.Image source={this.props.enemyImg}
style = {{
height:100,
width:100,
position:'absolute',
resizeMode: 'stretch',
left: this.props.enemyStartposX,
transform: [
{ translateY: this.props.moveEnemyVal },
]
}}></Animated.Image>
);
}
}
I'm running this through Expo XDE, and as I was building it, it worked. However, once I started coding the animation, Expo turned red and said I had an error in line 124 (in App.js), that .setState is not a function, it is an object. I commented it out, and it told me I had the same error in line 78 of my App.js file. Can you tell me what .setState is, and how to potentially fix this error? Thanks.
You have a wrong setState call in your animateEnemy function. That's why you got that error message.
animateEnemy() {
...
if (r == 2) {
r = 40;
this.setState({ enemySide: 'left' });
} else {
r = Dimensions.get('window').width = 140;
// Enemy is on the right
// this.setState = ({ enemySide: 'right' }); // This is wrong
this.setState({ enemySide: 'right' });
}
...
}
And it would be much better if you change all of the function with arrow function animateEnemy = () => { ... }. With this way, you don't need to manually bind it in the constructor.
You should bind the movePlayer function to the proper scope in your constructor:
constructor() {
this.movePlayer = this.movePlayer.bind(this);
}
I think your problem is how you handle the method callback. You just bind method movePlayer() and animateEnemy() in constructor like :
constructor(props) {
super(props);
this.state = {
movePlayerVal: new Animated.Value(40),
playerSide:'left',
points: 0,
moveEnemyVal: new Animated.Value(0),
enemyStartposX: 0,
enemySide: 'left',
enemySpeed: 4200,
gameOver: false,
};
// This binding is necessary to make `this` work in the callback
this.movePlayer = this.movePlayer.bind(this);
this.animateEnemy = this.animateEnemy.bind(this);
}
maybe you can learn deeply about how your handle method in ReactNative in this.
i hope my answer can help you..
I have list of items. I am using ListView for it and I need to be able to delete any row by swiping left or right.
Where can I start from here?
If you prefer, follow this guide which uses React Native Swipeout.
Otherwise, here's my SwipeList and SwipeListRow component. I partially use my library Cairn for styling, but it should be easily translated into a normal React Stylesheet if you care to do so:
SwipeList.js
import React from 'react';
import { Text, ListView } from 'react-native';
import styleContext from 'app/style';
const style = styleContext.extend({
listViewSection: {
paddingVertical: 10,
paddingLeft: 15,
backgroundColor: '$greyDefault'
},
'text.listViewSection': {
color: '$greyMid',
fontSize: 16,
marginLeft: 5
}
});
function SwipeList({ dataSource, renderRow }) {
function renderSectionHeader(sectionData, sectionId) {
return (
<View {...style('listViewSection')}>
<Text {...style('text.listViewSection')}>{sectionId.toUpperCase()}</Text>
</View>
);
}
if (!dataSource.rowIdentities.length) {
return (
<Text>No items found.</Text>
);
}
return (
<ListView
dataSource={dataSource}
automaticallyAdjustContentInsets={false}
directionalLockEnabled
keyboardShouldPersistTaps={false}
keyboardDismissMode={'on-drag'}
renderSectionHeader={renderSectionHeader}
renderRow={renderRow} />
);
}
SwipeList.propTypes = {
dataSource: React.PropTypes.shape({
rowIdentities: React.PropTypes.array.isRequired
}).isRequired,
renderRow: React.PropTypes.func.isRequired
};
export default SwipeList;
SwipeListRow.js
import React from 'react';
import {
View,
Text,
ScrollView,
Animated,
Dimensions
} from 'react-native';
import styleContext from 'app/style';
const { width } = Dimensions.get('window');
const style = styleContext.extend({
swipeMessage: {
position: 'absolute',
top: 0,
height: 75,
justifyContent: 'center',
alignItems: 'center'
},
itemContainer: {
width
}
});
const WHITE = 0;
const GREEN = 1;
const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
class SwipeListRow extends React.Component {
constructor(props) {
super(props);
this.state = {
color: new Animated.Value(WHITE)
};
}
animateScroll = (e) => {
const threshold = width / 5;
let x = e.nativeEvent.contentOffset.x;
let swiped = null;
x = x * -1;
if (x > -50 && this.swiped !== WHITE) {
swiped = WHITE;
} else if (x < -50 && x > -threshold && this.swiped !== GREEN) {
swiped = GREEN;
}
if (swiped !== null) {
this.swiped = swiped;
Animated.timing(this.state.color, {
toValue: swiped,
duration: 200
}).start();
}
}
takeAction = () => {
if (this.swiped) {
Animated.timing(this.state.color, {
toValue: WHITE,
duration: 200
}).start();
this.props.onSwipe();
}
}
render() {
const { swipeEnabled, swipeMessage, children } = this.props;
const bgColor = this.state.color.interpolate({
inputRange: [
WHITE,
GREEN
],
outputRange: [
'rgb(255, 255, 255)',
'rgb(123, 204, 40)'
]
});
return (
<View>
<AnimatedScrollView
horizontal
directionalLockEnabled
automaticallyAdjustContentInsets={false}
onScroll={this.animateScroll}
scrollEventThrottle={16}
scrollEnabled={swipeEnabled}
onMomentumScrollBegin={this.takeAction}
style={[{ flex: 1 }, { backgroundColor: bgColor }]}>
<View>
<View {...style('itemContainer')}>
{children}
</View>
<View
{...style(
'swipeMessage',
[{ width: width / 5, right: -width / 5 - 20 }]
)}>
<Text {...style('text.bold text.white')}>{swipeMessage}</Text>
</View>
</View>
</AnimatedScrollView>
</View>
);
}
}
SwipeListRow.propTypes = {
children: React.PropTypes.node.isRequired,
onSwipe: React.PropTypes.func.isRequired,
swipeEnabled: React.PropTypes.bool.isRequired,
swipeMessage: React.PropTypes.string.isRequired
};
export default SwipeListRow;
With these components, now all you must do is pass in the required datasource as you would to a normal list view, as described on the ListView component documentation.
<SwipeList
dataSource={dataSource}
renderRow={(item) => (
<SwipeListRow
key={item.id}
swipeMessage={'Delete Item'}
onSwipe={() => deleteItem(item)}
swipeEnabled={true}>
<<< INSERT DISPLAY OF ROW HERE >>>
</SwipeListRow>
)} />
use this one
react-native-swipe-list-view
This works really good and you can scale to anything.