make dragable

    0

    0

    Library: react-native

    import React, {useRef} from 'react';
    import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
    
    const App = () => {
      const pan = useRef(new Animated.ValueXY()).current;
    
      const panResponder = useRef(
        PanResponder.create({
          onMoveShouldSetPanResponder: () => true,
          onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
          onPanResponderRelease: () => {
            pan.extractOffset();
          },
        }),
      ).current;
    
      return (
        <View style={styles.container}>
          <Text style={styles.titleText}>Drag this box!</Text>
          <Animated.View
            style={{
              transform: [{translateX: pan.x}, {translateY: pan.y}],
            }}
            {...panResponder.panHandlers}>
            <View style={styles.box} />
          </Animated.View>
        </View>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      },
      titleText: {
        fontSize: 14,
        lineHeight: 24,
        fontWeight: 'bold',
      },
      box: {
        height: 150,
        width: 150,
        backgroundColor: 'blue',
        borderRadius: 5,
      },
    });
    
    export default App;
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.