0

I am new to React-Native, using the swipeable componet to render the new "View" for delete purpose. after swiping right it does not work. It gives WARN, which below I have mentioned.

import React from 'react';

import { 
  View,
  Text,
  StyleSheet,
  
 } from 'react-native';

 import Swipeable from 'react-native-gesture-handler/Swipeable';

function App(props) {
  return (
    <Swipeable renderRightActions={()=> (
      <View style={{backgroundColor:'red', width:70}}>

      </View>
    )}>
    <View style={styles.container}>
      <Text style={styles.text}> Swipe right to Delete</Text>
    </View>
    </Swipeable>
  );
}


const styles = StyleSheet.create({
  container:{
    flexDirection:"row",
    backgroundColor:'lightgray',
    width: "100%",
    height:70,
    justifyContent:'center',
    alignItems:'center',
  },
  text:{
    fontWeight:'bold',
    fontSize:18,
  }
})
export default App;

Whenever I try to swipe right, the "View" doesn't effect and gives warining.

Warrining:

WARN [react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!
PanGestureHandler@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.swipeabletest&modulesOnly=false&runModule=true:110702:38
Swipeable@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.swipeabletest&modulesOnly=false&runModule=true:110053:36
App
RCTView
View
RCTView
View
AppContainer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.swipeabletest&modulesOnly=false&runModule=true:77006:36
swipeableTest(RootComponent)@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.swipeabletest&modulesOnly=false&runModule=true:83408:28
Muhammad Yasir
  • 5
  • 1
  • 4
  • Please use backticks to format your warning too. – re-za Mar 23 '22 at 10:52
  • I recommend you to use the library react-native navigation for basically anything that has something to do with navigation in your react-native app. It covers pretty much everything you need and will probably save you some time on the long run. Have a look at it here: https://reactnavigation.org/ – Maximilian Dietel Mar 23 '22 at 11:23

0 Answers0