Is there a way to mantain the position of ScrollView in react-native when using conditional rendering?

Question

Im using react-native-camera with a group of buttons that take pictures, Since I want to fill my app with more content in one single screen then Im using a ScrollView component. Whenever I press a button to take a picture I render the camera component, but when going back to my main view the ScrollView resets its position. For this Im using conditional rendering. I render the camera or the main view with content. Is there an easy or proper way to achieve this?

So, I know there is a way to scroll to a defined position with scrollview including animation, but that might work with listeners for each button that I have for the camera. I still dont know whats the best option for this.

import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View, Button, ScrollView } from 'react-native';
import { RNCamera } from 'react-native-camera';

export default class BadInstagramCloneApp extends Component {
  constructor(props){
    super(props);
    this.state = {
      pictureType: null,
      isVisible: false,
      value1: null,
      value2: null
    }
  }

  render() {
    return (
        <View style={styles.subcontainer}>
          {this.state.isVisible === true
              ?
                <View style={styles.container}>
                  <RNCamera
                      ref={ref => {
                        this.camera = ref;
                      }}
                      style={styles.preview}
                      type={RNCamera.Constants.Type.back}
                      flashMode={RNCamera.Constants.FlashMode.on}
                      permissionDialogTitle={'Permission to use camera'}
                      permissionDialogMessage={'We need your permission to use your camera phone'}
                      onGoogleVisionBarcodesDetected={({ barcodes }) => {
                        console.log(barcodes);
                      }}
                  />
                  <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
                    <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
                      <Text style={{ fontSize: 14 }}> SNAP </Text>
                    </TouchableOpacity>
                  </View>
                </View>
              :
                <ScrollView>
                  <Button title='PHOTO 1' onPress={() => this.initTakingPicture("A")}/>
                  <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam enim ex,
                    vehicula quis rhoncus et, tristique vitae est. Nullam nec odio est.
                    Nunc diam dolor, sagittis sed scelerisque nec, fringilla at tortor.
                    Donec vitae nibh risus. Integer et cursus ante.
                    Aliquam sodales elementum nisl, a bibendum ipsum sollicitudin eget.
                    Praesent non molestie augue. Curabitur at dui nunc.
                    Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci
                    luctus et ultrices posuere cubilia Curae; Donec sodales lacus et ex
                    posuere elementum. Pellentesque egestas eros ut elit viverra, maximus volutpat diam
                    rhoncus. Proin sed lacinia quam. Nunc a leo ullamcorper, accumsan lectus vitae,
                    tristique mauris. Duis non eros quis nisi efficitur laoreet non sit amet neque.
                    Aenean egestas, urna eget ultricies pretium, ligula ex euismod libero, ac dignissim sem velit vitae ex. Proin consequat quam sed tellus ornare, feugiat porta sapien lacinia. Integer scelerisque auctor lorem mattis lobortis. Sed consequat at nibh vel consequat. Ut ullamcorper aliquet commodo. Nam elementum sed elit ut aliquet. Proin urna est, ullamcorper in elit ut, tristique eleifend nisl.

                    Nulla facilisi. Duis in mollis urna. Cras lacus lectus, vulputate ut eleifend at, egestas eu arcu. Cras ornare nibh a euismod vestibulum. Vivamus facilisis sem non est dictum, ac porta massa venenatis. Duis non dolor fringilla, fringilla dui quis, feugiat arcu. Nullam in turpis id augue consectetur volutpat et eget arcu. Praesent tincidunt sit amet ligula ac bibendum.

                    Ut mollis vitae ex sed pellentesque. In et viverra leo, eu pulvinar velit. Nunc a maximus sem. Nunc venenatis turpis eu accumsan rutrum. Proin lacinia velit et ex venenatis, sed convallis nisi sodales. Aenean placerat dapibus ultrices. Aenean et interdum mauris. Etiam quis ante tincidunt, dapibus orci in, finibus velit. Cras lorem nibh, commodo at posuere ac, porta sodales massa. Nulla mollis cursus eros, a rhoncus magna posuere at. Fusce orci augue, sodales eget ligula at, lacinia vulputate lectus.

                    Cras rhoncus augue sed eleifend sagittis. Proin fermentum ut ligula eu faucibus. Sed ullamcorper urna lacus, eget venenatis felis aliquet at. Ut orci turpis, porttitor tempus sem quis, fringilla porta ante. Mauris bibendum enim purus, et congue ipsum cursus quis. Nunc quis aliquam erat. Phasellus id turpis at dui iaculis laoreet. Quisque sed tincidunt lacus. Ut efficitur, sapien id lacinia congue, lorem tortor dictum magna, ac eleifend lectus ligula non diam. Nulla enim orci, faucibus et sagittis a, mattis nec felis. Nunc ex mauris, ornare eget tellus vitae, sollicitudin fermentum sapien. Donec mollis nec nunc laoreet ultricies. Suspendisse imperdiet quam non molestie pellentesque. Maecenas facilisis urna eget tortor viverra cursus. Pellentesque lacinia lacinia turpis, eget lobortis sapien.
                  </Text>
                  <Button title='PHOTO 2' onPress={() => this.initTakingPicture("B")}/>
                  <Button title='SHOW RESULTS' onPress={this.showResults}/>
                </ScrollView>
          }
        </View>
    );
  }

  showResults = () => {
    console.log('VALOR1: ' + this.state.value1);
    console.log('VALOR2: ' + this.state.value2);
  }

  takePicture = async function() {
    if (this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options);
      console.log(data.uri);
      let fieldToSave = "value1" // Fallback
      if (this.state.pictureType === "A") {
        // Operation you need to do for pictureType A
        fieldToSave = "value1"
        //FIELTOSAVE DEBE OPTIMIZARSE Y GUARDAR SU VALOR EN LOCAL STATE
        //NO HACE FALTA CAMBIAR PARAMETROSS A ENVIAR PORQUE TOMAN EL MISMO NOMBRE
      } else if (this.state.pictureType === "B") {
        // Operation you need to do for pictureType B
        fieldToSave = "value2"
      }

      this.setState({
        isVisible: false,
        pictureType: null,
        [fieldToSave]: data.uri
      });
    }
  };

  initTakingPicture = (pictureType) => {
    this.setState({
      isVisible: true,
      pictureType: pictureType
    })
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black'
  },
  subcontainer: {
    flex: 1,
    flexDirection: 'column',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
});

Just in case, I used some Lorem Ipsum to fill all the content and make the ScrollView scroll to see the problem itself.

I expect the ScrollView itself to maintain its position, not resetting after re-render

Answer 1

Ok, so as the user @Javan_Poirier said, there is a way to do this. First I used a listener attached to the scrollview component, that is able to get the current position 'OnScroll'. Then, save this value on state value. Finally, I call a method every time a press a button that shows the camera and update the current position to the state value, so next time content renders again, Ill set scrollview position on itself with the state.