Home

app.js

import React from 'react';
import {
  View,
  ScrollView,
  Text,
  Dimensions,
  TouchableOpacity,
  KeyboardAvoidingView,
  TextInput,
} from 'react-native';

const hScreen = Dimensions.get('window').height - 20;

const App1 = ({item, setItem}) => (
  <View
    style={{
      backgroundColor: 'red',
      height: hScreen,
      width: '100%',
    }}>
    <View style={{flex: 1}}>
      <View
        style={{
          position: 'absolute',
          left: 10,
          top: 10,
        }}>
        <TouchableOpacity
          onPress={() => setItem(item - 1)}
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            backgroundColor: 'green',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>App1</Text>
        </TouchableOpacity>
      </View>
      <KeyboardAvoidingView enabled behavior="padding">
        <View>
          <View
            style={{
              height: '100%',
              justifyContent: 'center',
              // alignItems: 'center',
            }}>
            <TextInput
              style={{
                backgroundColor: '#fff',
              }}></TextInput>
          </View>
          <View
            style={{
              position: 'absolute',
              bottom: 30,
              right: 10,
            }}>
            <TouchableOpacity
              onPress={() => setItem(item + 1)}
              style={{
                width: 50,
                height: 50,
                borderRadius: 25,
                backgroundColor: 'blue',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text>App1</Text>
            </TouchableOpacity>
          </View>
        </View>
      </KeyboardAvoidingView>
    </View>
  </View>
);

const App2 = ({item, setItem}) => (
  <View
    style={{
      backgroundColor: 'green',
      height: hScreen,
    }}>
    <View style={{flex: 1}}>
      <View
        style={{
          position: 'absolute',
          // left: 10,
          // top: 10,
        }}>
        <TouchableOpacity
          onPress={() => setItem(item - 1)}
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            backgroundColor: 'green',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>App1</Text>
        </TouchableOpacity>
      </View>
      <View
        style={{
          position: 'absolute',
          bottom: 10,
          right: 10,
        }}>
        <TouchableOpacity
          onPress={() => setItem(item + 1)}
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            backgroundColor: 'blue',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>App1</Text>
        </TouchableOpacity>
      </View>
    </View>
  </View>
);

const App3 = ({item, setItem}) => (
  <View
    style={{
      backgroundColor: 'blue',
      height: hScreen,
    }}>
    <View style={{flex: 1}}>
      <View
        style={{
          position: 'absolute',
          left: 10,
          top: 10,
        }}>
        <TouchableOpacity
          onPress={() => setItem(item - 1)}
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            backgroundColor: 'green',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>App1</Text>
        </TouchableOpacity>
      </View>
      <View
        style={{
          position: 'absolute',
          bottom: 10,
          right: 10,
        }}>
        <TouchableOpacity
          onPress={() => setItem(item + 1)}
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            backgroundColor: 'blue',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>App1</Text>
        </TouchableOpacity>
      </View>
    </View>
  </View>
);

const App4 = ({item, setItem}) => (
  <View
    style={{
      backgroundColor: 'tomato',
      height: hScreen,
    }}>
    <View style={{flex: 1}}>
      <View
        style={{
          position: 'absolute',
          left: 10,
          top: 10,
        }}>
        <TouchableOpacity
          onPress={() => setItem(item - 1)}
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            backgroundColor: 'green',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>App1</Text>
        </TouchableOpacity>
      </View>
      <View
        style={{
          position: 'absolute',
          bottom: 10,
          right: 10,
        }}>
        <TouchableOpacity
          onPress={() => setItem(item + 1)}
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            backgroundColor: 'blue',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>App1</Text>
        </TouchableOpacity>
      </View>
    </View>
  </View>
);

const Components = [App1, App2, App3, App4];

export default function Teste() {
  const refScrool = React.useRef();
  const [item, setItem] = React.useState(0);

  const scrollItemScreen = i => {
    let posY = i * Math.round(hScreen);
    refScrool.current.scrollTo({
      x: 0,
      y: posY,
      animated: true,
    });
  };

  React.useEffect(() => {
    scrollItemScreen(item);
  }, [item]);

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'green',
      }}>
      <ScrollView
        ref={refScrool}
        onMomentumScrollEnd={e => {
          console.log(Math.round(e.nativeEvent.contentOffset.y / hScreen));
        }}
        showsVerticalScrollIndicator={false}
        decelerationRate="fast"
        scrollEnabled={false}
        keyboardShouldPersistTaps="always"
        snapToInterval={hScreen}>
        {Components.map((C, i) => (
          <C key={`${i}`} item={i} setItem={setItem} />
        ))}
      </ScrollView>
    </View>
  );
}