I have a bottom bar to which i want to add this kind of background in react native currently it looks like this.
How do i achieve this
This is my current code
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Image
style={tabStyle.iconSize}
source={require('../assets/List-icon-1.png')}
/>
<Image
style={tabStyle.arrowSize}
source={require('../assets/Arrow-1-1.png')}
/>
</View>
const tabStyle = StyleSheet.create({
iconSize: {
height: 35,
width: 35,
marginBottom: 5,
},
arrowSize: {
height: 17,
width: 15,
marginBottom: 5,
},
});
You need a component for this.
Using Yarn
yarn add react-native-linear-gradient
Using Npm
npm install react-native-linear-gradient --save
after that
import LinearGradient from 'react-native-linear-gradient';
// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>
// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});
if doesnt work u can commet for help ^^
You can customize this in tabBar options prop in your tabBar component
tabBarOptions={{
activeTintColor: '#fff',
inactiveTintColor: '#fff',
activeBackgroundColor: 'transparent',
inactiveBackgroundColor: '#fff',
style: {
backgroundColor: '#white',
}
}}
>
Related
I have a component that is an audio slider (the built in one was deprecated), to modify the range of the volume. It has a bug that the slider and thumb are always blue, and we need green. There is a stylesheet with the styles for each part of the component. When I try to apply the stylesheet to the '< input >' element, I get an error:
Error: Minified React error #62; visit https://reactjs.org/docs/error-decoder.html?invariant=62&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
which says:
The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
In all the other core components (see this list about ReactNative
View style props
the applied style.XXX works. But the '< input >' tag is not listed as a ReactNative element, so it seems I have to use a different method to style it.
Here is the code:
const AudioSlider: FC<any> = (props: any) => {
const {audioCategory, activeSlider, setActiveSlider, setVolume, volume} =
props;
return (
<View style={style.AudioSliderContainer} key={audioCategory}>
<Pressable
style={
activeSlider == audioCategory
? [
style.SliderContainer,
{borderColor: $config.PRIMARY_COLOR || '#0A8C4A'},
]
: style.SliderContainer
}
onPressIn={() => setActiveSlider(audioCategory)}>
<Text style={style.SliderText}>Max</Text>
<input
type={'range'}
className="AudioSliderInput"
style={style.AudioSliderInput}
onChange={(e) => setVolume(audioCategory, e.target.value)}
value={volume}
/>
</Pressable>
<Text style={style.AudioSliderText}>{audioCategory || 'Audio'}</Text>
</View>
);
};
and the stylesheet:
export default AudioSlider;
const style = StyleSheet.create({
AudioSliderContainer: {
width: 56,
height: 175,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 5,
},
AudioSliderInput: {
width: 100,
height: 30,
transform: 'rotate(-90deg) translateX(37px)',
borderRadius: 0,
backgroundColor: '#0A8C4A',
},
AudioSliderText: {
width: '100%',
fontFamily: 'Eurostile',
fontWeight: 'bold',
fontSize: 10,
color: $config.SECONDARY_FONT_COLOR || '#FFFFFF',
paddingTop: 10,
paddingBottom: 5,
textAlign: 'center',
display: 'flex',
justifyContent: 'center',
},
SliderContainer: {
width: '100%',
height: 'calc(100% - 30px)',
backgroundColor: '#373737',
borderRadius: 6,
justifyContent: 'space-between',
alignItems: 'center',
padding: 10,
paddingTop: 5,
borderColor: 'transparent',
borderWidth: 1,
borderStyle: 'solid',
},
SliderText: {
fontFamily: 'Eurostile',
fontWeight: 'bold',
fontSize: 9,
color: $config.SECONDARY_FONT_COLOR || '#FFFFFF',
textAlign: 'center',
paddingVertical: 5,
width: '100%',
marginRight: -2,
},
});
In my research, I found that I will also need to "cancel" the default styles for the input type="range" element using -webkit- properties, which are not recognized.
Questions:
Why the style prop is being interpreted as a string instead of a Javascript object that has the requested mappings of prop:value?
Should I switch to an external css file and import it, for the < input > element? or use style.components (which are not used elsewhere) or inline CSS perhaps?
How to be able to use -webkit-appearance: none; as part of the style?
If I have to throw everythign out and start over just to get green, which community slider should I use? Many seem to have loads of unclosed issues?
Many thanks!
I'm a newbie to react-native and when I learned that there are many CSS properties that are not in the react-native stylesheet like gap, grid, etc.
I am in trouble regarding this new issue and haven't found any answer anywhere to this.
I hope stack overflow will surely help me. Thanks in advance!
Goal: To create a button with an icon on its border.
Here is my code:
import { StyleSheet, Text, View } from 'react-native'
import React from 'react';
//styles
import CommonStyles from '../constants/CommonStyles';
//icons
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
const App = () => {
return (
<View style={styles.copyButton}>
<Text style={{fontSize:36, fontWeight:'800'}}>Copy</Text>
<Text style={{borderRadius:50, backgroundColor:"#fff", padding: 10}}>
<MaterialIcon name={"file-copy"} size={30} style={styles.copyIcon} />
</Text>
</View>
)
}
export default App;
const styles = StyleSheet.create({
copyButton: {
backgroundColor: '#BFBFBF',
borderRadius: 5,
marginLeft: 72,
marginRight: 72,
marginTop: 40,
padding: 32,
position: 'relative',
flexDirection: 'row'
},
copyIcon: {
// backgroundColor: '#fff',
// padding:10,
// borderRadius:50
position: 'absolute',
transform: [{translateX: 50}],
transform: [{translateY: 50}],
right: 0, top: '50%',
}
})
Expected Output
here you can check sample
<View style={styles.copyButton}>
<Text style={styles.btnText}>Copy</Text>
<View style={styles.btnRelative}>
<MaterialIcon name={"file-copy"} size={30} style={styles.copyIcon} />
</View>
</View>
const styles = StyleSheet.create({
copyButton: {
backgroundColor: '#BFBFBF',
borderRadius: 5,
padding: 32,
flexDirection: 'row',
width: '40%',
},
copyIcon: {
position: 'absolute',
transform: [{translateX: 50}],
right: 0,
top: '50%',
},
btnText: {fontSize: 36, fontWeight: '800'},
btnRelative: {
borderRadius: 50,
backgroundColor: '#fff',
padding: 10,
position: 'absolute',
end: -25,
alignSelf: 'center',
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center',
},
});
I have a card with 2 tabs inside. If one tab has more text than the other the height of the taller tab will be forced on to the shorter tab. Ideally, each card would have a fixed height and on more content, it would add a scroll bar instead of expanding the whole card.
Card code:
<Card style={HomeStyles.card}>
<Tabs initialPage={0} tabBarUnderlineStyle={{ backgroundColor: 'orange' }} onChangeTab={({ i }) => this.tabChanged(i)}>
<Tab heading={
<TabHeading style={{ backgroundColor: '#1f1e1e' }}>
<Icon type={this.props.iconType} name={this.props.iconName} style={HomeStyles.cardHeaderIcon} />
<Text>{this.props.tabName}</Text>
</TabHeading>} style={HomeStyles.cardBody}>
{this.props.mainTab}
</Tab>
<Tab heading={
<TabHeading style={{ backgroundColor: '#1f1e1e' }}>
<Icon type="FontAwesome" name="info-circle" style={HomeStyles.cardHeaderInfoTabIcon} />
<Text>Info</Text>
</TabHeading>} style={HomeStyles.cardBody}>
{this.props.infoTab}
</Tab>
</Tabs>
</Card>
// And styles
const HomeStyles = StyleSheet.create({
card: {
flex: 1,
marginLeft: 10,
marginRight: 10,
marginTop: 15,
marginBottom: 20,
borderRadius: 1,
borderWidth: 2,
borderColor: BackgroundColor,
},
cardHeader: {
backgroundColor: BackgroundColor,
height: 15
},
cardHeaderIcon: {
fontSize: 15,
color: '#ffa31a'
},
cardHeaderText: {
color: '#fff',
fontSize: 15,
},
cardHeaderInfoTabIcon: {
fontSize: 15,
color: '#70fff7'
},
cardBody: {
borderColor: '#ffa31a',
backgroundColor: BackgroundColor,
},
cardBodyText: {
alignItems: 'center',
color: '#fff',
fontSize: 12
},
cardButton: {
height: 25,
width: 100,
margin: 5, alignSelf: "center"
}
});
I have a component in a website that looks like this:
Regular card
It's basically a div with an image inside it, but the image has a margin-top of -50 so that it overflows off the card.
I would like to accomplish the same thing with react-native and native-base. Here is the relevant code:
render() {
return (
<View style={styles.container}>
<Card>
<CardItem style={{ marginTop: -50, justifyContent: 'center' }}>
<Image style={styles.image} source={{ uri: this.state.band.imageComponent.link }} />
</CardItem>
</Card>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 150
},
image: {
width: 150,
height: 150,
)
And the result looks like this:
React-native card
As you can see, the picture is cutoff at the top. How can I keep the image overflow and have it overlay the card like in my first image?
Overflow is not supported in Android. There are lots of open issues for that. Check some of them here and here.
Here's an npm package that apparently solves that issue that you could try.
Otherwise you can use a workaround for that I found on this medium post.
According to your image you have to wrap your image and the container inside another View as siblings and then position them absolutely.
Here's the code that I tweaked a little bit from that post. You can replace the View according to your Card and CardItem styles.
<View style={styles.container}>
<View style={styles.cardSection1}>
<Image style={styles.image} source={{ uri: 'https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image' }} />
</View>
<View style={styles.cardSection2}>
</View>
</View>
const styles = {
container: {
flex: 1,
backgroundColor: 'grey',
alignItems: 'center'
},
image: {
width: 150,
height: 150,
},
cardSection1: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
width: 100,
height: 100,
borderRadius: 50 / 2,
zIndex: 2,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.2,
shadowRadius: 10,
elevation: 7,
},
cardSection2: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 25,
width: 300,
height: 150,
borderRadius: 8,
backgroundColor: 'white',
zIndex: 1,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.2,
shadowRadius: 10,
elevation: 5,
}
}
This is the output that I got.
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet,TextInput,Dimensions,Image } from 'react-native';
import ButtonRoundBorder from '../components/ButtonRoundBorder';
const window = Dimensions.get('window')
// create a component
class Login extends Component {
render() {
return (
<View style={styles.container}>
<Image style={{width:window.width,height:window.height,position:'absolute'}} source={require('../images/bg2.jpeg')}/>
<View style={styles.overlayImageStyle} >
<Image style={{flex:1,borderRadius:80}} resizeMode={'contain'} source={require('../images/profile.jpg')} />
</View>
<View style={styles.cardStyle}>
<View style={styles.insideCard}>
<Text style={{fontWeight:'bold',fontSize:20,alignSelf:'center'}}>Login</Text>
<TextInput style={[styles.textInputStyle,{marginTop:30}]} underlineColorAndroid='#000000' placeholder='Enter Email' />
<TextInput style={[styles.textInputStyle,{marginTop:20}]} underlineColorAndroid='#000000' placeholder='Enter Password' />
<ButtonRoundBorder style={{marginTop:40}} title='Login'/>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
alignItems: 'center',
backgroundColor: 'transparent',
},
overlayImageStyle:{
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
width: 100,
height: 100,
borderRadius: 100/2,
backgroundColor: 'white',
top:50,
shadowColor: '#000',
// position: 'absolute',row
// shadowOpacity: 0.2,
// shadowRadius: 10,
elevation: 7,
},
cardStyle:{
// alignItems: 'center',
// justifyContent: 'center',
// position: 'absolute',
top: 80,
width: window.width - 40,
height: window.height - 200,
borderRadius: 8,
backgroundColor: 'white',
// backgroundColor: '#7E57C2',
shadowColor: '#000',
elevation: 5,
},
insideCard:{
top: 80,
alignContent: 'center',
justifyContent: 'center',
flexDirection:'column',
},
textInputStyle:{
width:300,
height:40,
alignSelf:'center',
}
});
//make this component available to the app
export default Login;
here is the link for screenshot
In attempts to dynamically add youtube videos to my React Native app, I chose to use a combination of WebView and iFrame since the current react-native-youtube component doesn't work for RN 16^. Ultimately, the solution does work, but the iframe border still shows and will not go away (even with css or frameborder = 0), nor can I change it's color with css. Any ideas? Here's my code:
video-preview component (where users can see video, title, etc before tapping):
module.exports = React.createClass({
render: function() {
return (
<TouchableHighlight
style={styles.touchCard}
underlayColor={'transparent'}
onPress={this.props.onPress} >
<View style={styles.card}>
<WebView
style={styles.videoPreview}
automaticallyAdjustContentInsets={true}
scrollEnabled={false}
style={styles.videoPreview}
html={this.props.source}
renderLoading={this.renderLoading}
renderError={this.renderError}
automaticallyAdjustContentInsets={false} />
<View style={[styles.container, this.border('organge')]}>
<View style={[styles.header, this.border('blue')]}>
<Text style={[styles.previewText]}>{this.props.text}</Text>
</View>
<View style={[styles.footer, this.border('white')]}>
<View style={styles.sourceRow}>
<View style={[this.border('white')]}>
<ImageButton
style={[styles.logoBtn, , this.border('red'), styles.row]}
resizeMode={'contain'}
onPress={this.onHeartPress}
source={this.props.src} />
</View>
<View style={[this.border('white')]}>
<Text style={[styles.rowText, {fontWeight: 'bold'}]}>{this.props.entryBrand}</Text>
<Text style={[styles.rowText]}>{this.props.views}</Text>
</View>
</View>
<View style={[styles.heartRow, this.border('black')]}>
<KeywordBox
style={[styles.category, this.border('blue')]}
key={this.props.key}
text={this.props.category}
onPress={this.props.categoryPress}
selected={this.props.selected} />
</View>
</View>
</View>
</View>
</TouchableHighlight>
);
Which looks like this:
And the input iframe html into the webview looks like this:
<iframe style='border: 0;border-width: 0px;' scrolling='no' frameborder='0' width='320' height='300' src='https://www.youtube.com/embed/2B_QP9JGD7Q'></iframe>
Here's my styling:
var styles = StyleSheet.create({
centerText: {
marginBottom:5,
textAlign: 'center',
},
noResultsText: {
marginTop: 70,
marginBottom:0,
color: '#000000',
},
sourceRow: {
justifyContent: 'space-around',
flexDirection: 'row',
},
rowText: {
textAlign: 'left',
color: 'white',
fontSize: 12,
marginLeft: 5,
fontFamily: 'SFCompactText-Medium'
},
detailText: {
fontFamily: 'SFCompactText-Light',
fontSize: 18,
color: 'white',
textAlign: 'left',
marginTop: 2,
marginLeft: 5,
},
touchCard: {
margin: 3,
width: window.width*0.95,
shadowOffset: {width: 2, height: 2},
shadowOpacity: 0.5,
shadowRadius: 3,
alignSelf:'center',
},
card: {
flex: 1,
width: window.width*0.98,
alignSelf:'center',
},
heartText: {
color: 'white',
fontSize: 12,
fontWeight: 'bold',
alignSelf: 'center',
fontFamily: 'SFCompactText-Medium'
},
heartRow: {
flexDirection: 'row',
justifyContent: 'space-around',
alignSelf: 'center',
justifyContent: 'center',
},
logoBtn: {
height: window.width/10,
width: window.width/10,
alignSelf:'center',
},
heartBtn: {
height: (92/97)*(window.width/13),
width: window.width/13,
alignSelf:'center',
},
category: {
fontFamily: 'Bebas Neue',
fontSize: 10,
fontWeight: 'bold'
},
header: {
flex: 1,
justifyContent: 'space-around',
marginTop: window.height/60,
},
footer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
margin: window.height/80,
},
container: {
flex: 1,
backgroundColor: '#1a1a1a',
},
videoPreview: {
flex: 2,
height: window.width*0.85,
width:window.width*0.98,
flexDirection: 'column'
},
previewText: {
fontFamily: 'Bebas Neue',
fontSize: 23,
color: 'white',
textAlign: 'left',
marginTop: 2,
marginLeft: 5,
},
});