Jason0011
Jason0011

Reputation: 482

Implement Scroll Into View onPress on specific screen

I'm trying to implement my code day by day by updating myself to right solution.. In below code I want to implement onPress button Screen redirection on same window with scrollview as it mention in code, there is a Two Screen A and Screen B, and above there is Two buttons when I click on any of the button at that time I want action to scroll to that screen..

how can I do this using Scroll Into View Library

https://www.npmjs.com/package/react-native-scroll-into-view

here is perfectly shown how I really want to make it..

https://vix.digital/blog/technology/react-native-scroll-to/

https://camo.githubusercontent.com/2ad769c6de7d3abf09f112361a0b07b38a54cb810774e332dfe28f6a95a9399b/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f505054525a52587a4846664f5756706f67762f67697068792e676966

App.js

import React, { useState } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {
  Dimensions,
  RefreshControl,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import Button from '../custom-components/Button'

const App = ({ navigation }) => {
    return (
      <View>
        <View style={{ alignItems: "center" }}>
          <View style={{ flexDirection: "row" }}>
            <Button
              title="ScreenA"
              stylebtn={styles.btns}
              stylebtntitle={styles.btnsTxt}
              onPress={screenA}
            />
            <Button
              title="ScreenB"
              stylebtn={styles.btns}
              stylebtntitle={styles.btnsTxt}
              onPress={ScreenB}
            />
          </View>
        </View>
        <ScrollView>
          <ScreenA style={styles.screen}/>
          <ScreenB style={styles.screen}/>
        </ScrollView>
      </View>
    );
};

const styles = StyleSheet.create({
  screen: {
    backgroundColor: 'yellow',
    flexDirection: 'column',
    justifyContent: 'center'
  },
});

export default App;

Upvotes: 1

Views: 92

Answers (0)

Related Questions