Question 33419 in React native Question posted in
The official React Native documentation can be found here.

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

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.

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0 
    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>
 )
   }
    Login or Signup to reply.
  3. 0

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search