biyootiful

 catWidthCal() {
    const items = JSONdata.categories;
    let width = [];
    for (let i = 0; i < items.length; i++) {
      width.push(document.getElementById("category" + i).offsetWidth);
    }
    this.setState({ catWidth: width });
 }

biyootiful

state = {
    data:mockJSON,
    categoryTextWidth: [],
    toLeft: 40, //for inital position of the slider
    currentSlideIndex: 0,
    currentItem: 0
  };

biyootiful

render(){
  return(
    <div style={backgroundStyle}>
      <div style={topMenusStyle} />
      <div style={categoriesStyle} />
      <div style={itemsStyle} />
    </div>   
  )
}

biyootiful

{
    "categories":[
        "Hulu Originals", "Featured Movies", "Holiday Shows", "TV Shows"
    ],
    "items":[
        //we will link array index with categories index
        [
          {
            "title": "Title of the show",
            "color": "border and screen color",

biyootiful

export default class App extends Component {
  render() {
    return (
      <Animated.ScrollView
        scrollEventThrottle={16}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { x: xOffset } } }],
          { useNativeDriver: true }
        )}
        horizontal

biyootiful

const xOffset = new Animated.Value(0);

const transitionAnimation = index => {
  return {
    transform: [
      { perspective: 800 },
      {
        scale: xOffset.interpolate({
          inputRange: [
            (index - 1) * SCREEN_WIDTH,

biyootiful

inputRange: [
            (index - 1) * SCREEN_WIDTH,
            index * SCREEN_WIDTH,
            (index + 1) * SCREEN_WIDTH
          ],
outputRange: [
            "entering animation", 
            "screen in the middle no transform", 
            "exiting animation"
          ]

biyootiful

//We declare this here because the device width will be used for scrollView again
const SCREEN_WIDTH = Dimensions.get("window").width;
//Screen component
const Screen = props => {
  return (
    <View style={styles.scrollPage}>
      //we are going to write animation function and pass it to here
      <Animated.View style={[styles.screen, transitionAnimation(props.index)]}>
        <Text style={styles.text}>{props.text}</Text>
      </Animated.View>

biyootiful

<View style={styleshere}>
   <Animated.View
      //this is the key for panResponder
      {...this.panResponder.panHandlers}
      style={[panStyle, { width: 200, height: 200 }]}
    >
      <Expo.GLView
         style={{ flex: 1 }}
         onContextCreate={this._onGLContextCreate}
       />

biyootiful

 _onGLContextCreate = async gl => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 1000
    );
    const renderer = ExpoTHREE.createRenderer({ gl });
    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);
  
    const geometry = new THREE.SphereBufferGeometry(1, 36, 36);
    const material = new THREE.MeshBasicMaterial({