I want to implement a submit button just like this with a transparent background but since I'm new to RN, I can't quite figure it out

Question

It isn't turning out how I want it to be Figma Design and the Coded in React Native

I want it to float and have a transparent background while being stuck to the bottom of the screen like I have shown in the Figma design.

const TicketDetails = () => {
  return (
  <View style={{backgroundColor:'#D0DEEA', flex:1, position: 'relative'}}>
    <ScrollView style={styles.containerMain} showsVerticalScrollIndicator={false}>
      <View style={styles.topNavigation}>
        <Back/>
        <Close/>
      </View>
      <View style={styles.headingContainer}>
        <Text  style={styles.heading}>Create New Ticket</Text>
      </View>
      <View style={styles.formContainer}>
        <View style={{flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={styles.formHeading}>Enter Ticket Details</Text>
          <Filter/>
        </View>
        <CustomDropdown data={serviceType} text={'Service Type'} placeholderText={'Select Service Type'}/>
        <CustomInput2 heading={'Assign Dealer'} placeholder={''}/>
        <CustomInput2 heading={'HMR'} placeholder={'Enter HMR Value'}/>
        <CustomDropdown data={criticality} text={'Criticality'} placeholderText={'Select Criticality'}/>
        <CustomDropdown text={'Customer Concerns'} placeholderText={'Select..'}/>
        <CustomInput2 heading={'Expected Date'} placeholder={'31 Dec 2022'}/>
      </View>
    </ScrollView>
    <View style={styles.nextButton}>
      <Submit text='Next' style={{position:'absolute'}}/>
    </View> 
  </View>
  )
}

const styles = StyleSheet.create({
  containerMain:{
    marginTop:60,
    backgroundColor:'#D0DEEA',
    opacity:1,
    position:'relative'
  },

  formContainer:{
    flex:0.7,
    backgroundColor: 'white',
    borderRadius: 35,
    marginTop:40,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.4,
  },

  nextButton:{
    flexDirection: 'column', 
    flexGrow: 1,            
    justifyContent: 'space-between',
  },

  topNavigation:{
    marginLeft:13,
    marginRight:13,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }

})

It's either there at the scroll end or does not appear to be floating.

Answer 1

example for you:

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

const logo = {
  uri: 

'https://reactnative.dev/img/tiny_logo.png',
  width: 64,
  height: 64
    };

const App = () => (
<View>
<ScrollView>
<Text style={{ fontSize: 96 }}>Scroll me 
plz</Text>
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />

<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Text style={{ fontSize: 96 }}>Scrolling 
 down</Text><Image source={logo} />
<Text style={{ fontSize: 96 }}>What's the 
best</Text>

<Text style={{ fontSize: 96 }}>Framework 
around?</Text>

<Text style={{ fontSize: 80 }}>React 
Native</Text>
</ScrollView>
<TouchableOpacity style={{
position: 'absolute',
width: '90%',
height: 50,
 alignItems: 'center',
 justifyContent: 'center',
 bottom: 30,
 left:15,
 right:5,
 backgroundColor:'#ff00ff',
 borderRadius:20
}} >

  <Text >text</Text>

</TouchableOpacity>
</View>
);

export default App;