I want to make button in react native with dynamic width. I just want to supply text in button component it create button according to text width.
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<TouchableHighlight style={{backgroundColor:'red', paddingTop:10, paddingLeft:20, paddingRight:20, paddingBottom:10}}>
<Text style={{color:'white', fontWeight:'bold'}}>BUTTON 2</Text>
</TouchableHighlight>
</View>
To accomplish this, use padding. I've set up an example here.
<TouchableHighlight style={{backgroundColor:'red', paddingTop:10, paddingLeft:20, paddingRight:20, paddingBottom:10}}>
<Text style={{color:'white', fontWeight:'bold'}}>BUTTON 2</Text>
</TouchableHighlight>
https://rnplay.org/apps/Hwinnw
Related
Here is my code
<Image
resizeMode="contain"
source={require('../../assets/splash.gif')}
style={{ width: '100%', alignSelf: 'center' }}
/>
How can I control the gif to loop only once while first render? thanks.
use ControlledGifView component from react-native-controlled-gif library
react-native-controlled-gif
I'm having issue on how to render a HTML API data name description in my react native code. Currently, the API data is in HTML format: HTML Format Data Image . I want to convert it to normal text like this: Normal Text Image. Please do help me out to solve this problem.
Given HTML API Data name: Given API Data name Image
This is my code:
return (
<ScrollView style={[GlobalStyle.CustomScrollView]}>
<HeaderBar3/>
<Text style={[GlobalStyle.EventTitle]}> Event Details</Text>
<View style={[GlobalStyle.EventDetailView]}>
<Image style={[GlobalStyle.EventDetailImage]} source={{uri: eventData.main_image}} resizeMode="contain"/>
<Text style={[GlobalStyle.EventSubtitle]}>Date:</Text>
<Text style={[GlobalStyle.EventDate]}>{date}</Text>
<Text style={[GlobalStyle.EventTime]}>{startTime}{'-'}{endTime}</Text>
<Text style={[GlobalStyle.EventSubtitle]}>Venue:</Text>
<Text style={[GlobalStyle.EventDescr]}>{eventData.venue}</Text>
<Text style={[GlobalStyle.EventSubtitle]}>Ticket:</Text>
<Text style={[GlobalStyle.EventTicketPrice]}>{eventData.promotional_price}</Text>
<Text style={[GlobalStyle.EventSubtitle]}>Description:</Text>
<Text style={[GlobalStyle.EventDescr]}>{eventData.description}</Text>
</View>
</ScrollView>
);
You can remove the HTML tags using .replace() method. Try this:
<Text style={[GlobalStyle.EventDescr]}>{eventData.description.replace(/(<([^>]+)>)/ig,'')}</Text>
Check the documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
In this example i tried to display two different things inside a listitem.
The problem is i couldn't manage to find out how can i show the "item.date" on the left of the line and "Click to show." string on the right of the line.
Solution with spaces
The code sample of the image is below:
<Text style={styles.textline}>{"\n"+item.date}<Text style={styles.continuetext}>{Array(22).fill('\t').join('')}Click to show.</Text></Text>
I have managed to do it by adding multiple "\t" to the string but its a bad solution and it can change according to screen size.
And i have already tried to wrap the two text tags inside a view tag and gave the prop "flex:1" to the view tag, then gave the text tag prop "alignSelf: "flex-end" " didn't work either.
Edit: I have tried to wrap texts inside a view like mentioned in the comments didn't work.
Full code here:
return( <ListItem thumbnail key={i}>
<Thumbnail square source={{ uri: 'url' }} />
<Body>
<TouchableScale transparent onPress={ ()=>{ Linking.openURL(item.url)}}
Component={TouchableScale}
friction={90}
tension={100}
activeScale={0.95}>
<Text>{item.head+"\n"}</Text>
<Text note numberOfLines={2}>{item.details}</Text>
<View style={{ flex:1,justifyContent: 'space-between', flexDirection: 'row' }}>
<Text style={{ fontSize:12,color: 'gray'}}>{"\n"+item.date}</Text>
<Text style={{ fontSize:12,color: '#143f90'}}>Click to show.</Text>
</View>
</TouchableScale>
</Body>
</ListItem>);
I am kinda new to React Native, any help would be great.
You can do something like that:
<View style={{ flex: 1, justifyContent: 'space-between', flexDirection: 'row' }}>
<Text>{item.date}</Text>
<Text>Click to show</Text>
</View>
I am using expo to debug an application. In debug mode (expo start) advertising is correctly displayed
on when I build the application (expo build: android) advertising is not displayed
when using the test key, the advertisement works correctly in apk
checked the key. google admob it's active
Do I need to make some settings to display admob ads
I watched the documentation there described only about inserting the code into the program. I use the library expo-ads-admob
<View style = {{ width: '100%', alignItems: 'center' }}>
<AdMobBanner
bannerSize="fullBanner"
adUnitID="ca-app-pub-3940256099942544/6300978111"
testDeviceID="EMULATOR" />
<TouchableHighlight onPress={() =>{this.props.navigation.navigate('SearchObjectPage');} style={{
marginTop: 30,
width: '90%',
padding: 10,
backgroundColor: '#a1cfed',
}}>
<View>
<View style={{flexDirection:'row'}}>
<Image source={require('./src/red.png')} style={ styles.button } resizeMode="contain"/><Text style = { styles.text }>{'check'}</Text>
</View>
</View>
</TouchableHighlight>
</View>
For simulators/emulators you can use EMULATOR for the test device ID.
However, if you create an apk, the divice will not run because it is not an emulator.
I have a simple shopping cart page in React Native app and I have "plus/minus" buttons for amount of each item.
I have 2 questions:
1- What is the best way to update items price when I tap to change the amount of each item? Should each price be an State?
2- Actually, I can statically change amount of each item in cart, but when I change any RN State, all items amounts I've changed is lost. How can I save my actions for not lose it all at states change?
<ScrollView>
<View style={styles.items} product="1">
<Avatar
size="large"
rounded
source={{ uri: "https://picsum.photos/80/80?random" }}
/>
<View style={styles.text}>
<Text style={styles.title}>Uva Prata</Text>
<Text style={styles.price}>R$ <Text style={styles.money}>4,90</Text> <Text style={styles.unit}>/ kg</Text></Text>
</View>
<View style={styles.amount}>
<NumericInput rounded
onChange={ } />
</View>
</View>
...other view
...other view
...other view
...