CODEWITHSUNDEEP
react-nativeexpo
localdata01
localdata01

Reputation: 657

react native how can I detect if left side is touched or right

I made an Instagram story clone, but I'm stuck with one thing. How can I detect if the left side is touched or the right side? Because the user can see the previous story if he touch left or the next story if the touch the right side.

Upvotes: 2

Views: 1091

Answers (1)

Vasyl Nahuliak
Vasyl Nahuliak

Reputation: 2468

import React from "react";
import {
  Dimensions,
  StyleSheet,
  View,
  Text,
  TouchableOpacity
} from "react-native";

const SCREEN_WIDTH = Dimensions.get("screen").width;

const App = () => {
  const handleLeft = () => {
    console.log("left side tapped");
  };

  const handleRight = () => {
    console.log("right side tapped");
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={handleLeft}
        style={[styles.touchable, styles.left]}
      >
        <Text>Left side</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={handleRight}
        style={[styles.touchable, styles.right]}
      >
        <Text>Right side</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row"
  },
  touchable: {
    flex: 1,
    width: SCREEN_WIDTH / 2
  },
  left: {
    backgroundColor: "navy"
  },
  right: {
    backgroundColor: "tomato"
  }
});

export default App;

Upvotes: 2

Related Questions