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 - react-native

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;

Answer 2

This request is a basic CSS knowledge.
Add position: 'relative' to the styles of the area that should snap under.
Add position: 'absolute' to your button styles. And your wish will come true.
If that doesn't help please share your sample code.
// this card component
<View style={{position: 'relative'}}>
// this button component
<TouchableOpacity style={{position: 'absolute', bottom: 0}}>
<Text>Hello World</Text>
</TouchableOpacity>
</View>

Answer 3

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>
<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>
)
}