How to make button not fixed in react native

Question

I'm currently making an fitness app and would like to have a "start session" button on showcase of workout page... I've tried making it absolute and stuff like that, but when I scroll down the page the button is fixed to certain part of the page, But I would like it to go down and stay in the same view whenever I scroll.

This is my code:

import React from 'react';
import {Button, Text, View, StyleSheet, Image, TouchableOpacity} from 'react-native';

const Push_day_showcase = ({navigation}) => {
    return(
        <View style={styles.container1}>
            <Text style={{color: 'white'}}>
                This is push-day-showcase page!
            </Text>

            <TouchableOpacity style={styles.barButton} onPress={()=>navigation.navigate("Push day workout")}>
                <Text>Start Session</Text>
            </TouchableOpacity>

        </View>
    );
};

const styles = StyleSheet.create({
    container1: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#202020',
    },
    barButton:{
        alignItems: 'center',
        padding:5,
        paddingLeft: 15,
        paddingRight: 15,
        margin: 8,
        marginBottom: 5,
        marginTop: 20,
        borderRadius: 10,
        backgroundColor: 'red'
    },
  }
);


export default Push_day_showcase;

Answer 1

This is doable by using flexbox:

import { Text, View, StyleSheet, Button, Image, TouchableOpacity, ScrollView } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  return (
        <ScrollView contentContainerStyle={styles.container1}>
          <View style={{flex: 1}}>
            <Text style={{color: 'white', fontSize: 64}}>
                This is push-day-showcase page!
                This is push-day-showcase page!
                This is push-day-showcase page!
            </Text>

          </View>
            <TouchableOpacity style={styles.barButton}>
                <Text>Start Session</Text>
            </TouchableOpacity>

        </ScrollView>
  );
}

const styles = StyleSheet.create({
  container1: {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#202020',
    padding: 32
  },
  barButton:{
    alignItems: 'center',
    padding:5,
    paddingLeft: 15,
    paddingRight: 15,
    margin: 8,
    marginBottom: 5,
    marginTop: 20,
    borderRadius: 10,
    backgroundColor: 'red',
  },
});````