How do I render a shadow on a View? I've tried many combinations of shadowColor, shadowOffset, shadowOpacity, and shadowRadius, which seem to do nothing. I am sure the style is applied correctly, since other attributes I've set work.
I am using React-Native 0.40 and below code works for me both on IOS and Android.
(Android-only) Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.
class MainApp extends Component {
render() {
return (
<View style={styles.container}>
<View elevation={5} style={styles.buttonContainer}>
<Text style={styles.textStyle}>Shadow Applied</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF'
},
textStyle: {
color: '#FFFFFF'
},
buttonContainer: {
backgroundColor: '#2E9298',
borderRadius: 10,
padding: 10,
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 3
},
shadowRadius: 5,
shadowOpacity: 1.0
}
})
Tested on iPhone.
Edit
Comment from # James. Thanks.
Note: For those on android, the backgroundColor is critical. I was using View as a container for another element and couldn't get a shadow until I specified a background color.
Use elevation to implement shadows on RN Android. Added elevation prop #27
<View elevation={5}>
</View>
It appears to be a bug in React native that shadowOpacity is set to type CGFloat instead of float according to CALayer doc. use iPhone 5 simulator before it's fixed. (CGFloat is float in older devices. )
The React Native issue which is tracking this is:
https://github.com/facebook/react-native/issues/449
viewStyle : {
backgroundColor: '#F8F8F8',
justifyContent: 'center',
alignItems: 'center',
height: 60,
paddingTop: 15,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
marginBottom: 10,
elevation: 2,
position: 'relative'
},
Use marginBottom: 10
You have to give elevation prop to View
<View elevation={5} style={styles.container}>
<Text>Hello World !</Text>
</View>
styles can be added like this:
const styles = StyleSheet.create({
container:{
padding:20,
backgroundColor:'#d9d9d9',
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 1
}
},
})
panel: {
// ios
backgroundColor: '#03A9F4',
alignItems: 'center',
shadowOffset: {width: 0, height: 13},
shadowOpacity: 0.3,
shadowRadius: 6,
// android (Android +5.0)
elevation: 3,
}
or you can use react-native-shadow for android
All About margins
this works in Android, but did not test it in ios
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { View, Platform } from 'react-native'
import EStyleSheet from 'react-native-extended-stylesheet'
const styles = EStyleSheet.create({
wrapper: {
margin: '-1.4rem'
},
shadow: {
padding: '1.4rem',
margin: '1.4rem',
borderRadius: 4,
borderWidth: 0,
borderColor: 'transparent',
...Platform.select({
ios: {
shadowColor: 'rgba(0,0,0, 0.4)',
shadowOffset: { height: 1, width: 1 },
shadowOpacity: 0.7,
shadowRadius: '1.4rem'
},
android: {
elevation: '1.4rem'
}
})
},
container: {
padding: 10,
margin: '-1.4rem',
borderRadius: 4,
borderWidth: 0,
borderColor: '#Fff',
backgroundColor: '#fff'
}
})
class ShadowWrapper extends PureComponent {
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.element,
PropTypes.node,
PropTypes.arrayOf(PropTypes.element)
]).isRequired
}
render () {
return (
View style={styles.wrapper}
View style={styles.shadow}
View style={styles.container}
{this.props.children}
View
View
View
)
}
}
export default ShadowWrapper
by styled component
const StyledView = styled.View`
border-width: 1;
border-radius: 2;
border-color: #ddd;
border-bottom-width: 0;
shadow-color: #000;
shadow-offset: {width: 0, height: 2};
shadow-opacity: 0.8;
shadow-radius: 2;
elevation: 1;
`
or by styles
const styles = StyleSheet.create({
containerStyle: {
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 1,
marginLeft: 5,
marginRight: 5,
marginTop: 10,
}
})
I'm using Styled Components and created a helper function for myself.
It takes the given Android elevation and creates a fairly equivalent iOS shadow.
stylingTools.js
import { css } from 'styled-components/native';
/*
REMINDER!!!!!!!!!!!!!
Shadows do not show up on iOS if `overflow: hidden` is used.
https://react-native.canny.io/feature-requests/p/shadow-does-not-appear-if-overflow-hidden-is-set-on-ios
*/
// eslint-disable-next-line import/prefer-default-export
export const crossPlatformElevation = (elevation: number = 0) => css`
/* Android - native default is 4, we're setting to 0 to match iOS. */
elevation: ${elevation};
/* iOS - default is no shadow. Only add if above zero */
${elevation > 0
&& css`
shadow-color: black;
shadow-offset: 0px ${0.5 * elevation}px;
shadow-opacity: 0.3;
shadow-radius: ${0.8 * elevation}px;
`}
`;
To use
import styled from 'styled-components/native';
import { crossPlatformElevation } from "../../lib/stylingTools";
export const ContentContainer = styled.View`
background: white;
${crossPlatformElevation(10)};
`;
Related
I am trying to create a custom React Component: A "Card" with styling that makes it look like a gray rectangle with text inside of it.
I'll attach the files, but the simulator screen is white and it doesn't show the Background Image with the Card with the Text. If I get rid of the "default" word in the Card component, then it just shows the gray card but still no background image.
Any ideas? Thanks!
That's App.js
import React from 'react';
import { Image, SafeAreaView, StyleSheet, Text, View} from 'react-native';
import { ImageBackground, Dimensions } from 'react-native';
import {Card} from './Components/Card'
const deviceWidth = Dimensions.get('window').width
export default function App() {
return (
<View>
<ImageBackground style={{flex: 1}} source={require("./assets/gradient_dark_orange_navy.png")}>
<Card title='MY TITLE!'></Card>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f4ae74',
alignItems: 'center',
justifyContent: 'center',
},
smallImage: {
width: 50,
height: 50
},
mediumImage: {
width: 150,
height: 150
},
container: {
flex: 1,
backgroundColor: '#f4ae74',
justifyContent: 'center',
},
bar: {
position: 'absolute',
bottom: 0,
width: "100%",
height: "10%",
backgroundColor: '#FFC107',
borderRadius: 9,
},
card: {
width: deviceWidth - 32,
marginHorizontal: 16,
backgroundColor: 'lightgray',
height: deviceWidth * 1,
borderRadius: 35,
},
shadowProp: {
shadowRadius: 12,
shadowOpacity: 0.8,
shadowColor: "#757575",
shadowOffset: {
width: 0,
height: 3,
}
},
openingCardStyle:{
bottom: 65,
position: 'absolute',
height: 550
}
});
Then this is Card.js
import React from 'react';
import { Image, SafeAreaView, StyleSheet, Text, View} from 'react-native';
import { ImageBackground, Dimensions } from 'react-native';
const deviceWidth = Dimensions.get('window').width
export function Card (props) {
return (
<View style={[styles.card, styles.shadowProp, styles.openingCardStyle]}>
<Text style={{align: 'center'}}>
{props.title}
{props.subtitle}
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f4ae74',
alignItems: 'center',
justifyContent: 'center',
},
smallImage: {
width: 50,
height: 50
},
mediumImage: {
width: 150,
height: 150
},
container: {
flex: 1,
backgroundColor: '#f4ae74',
justifyContent: 'center',
},
bar: {
position: 'absolute',
bottom: 0,
width: "100%",
height: "10%",
backgroundColor: '#FFC107',
borderRadius: 9,
},
card: {
width: deviceWidth - 32,
marginHorizontal: 16,
backgroundColor: 'lightgray',
height: deviceWidth * 1,
borderRadius: 35,
},
shadowProp: {
shadowRadius: 12,
shadowOpacity: 0.8,
shadowColor: "#757575",
shadowOffset: {
width: 0,
height: 3,
}
},
openingCardStyle:{
bottom: 65,
position: 'absolute',
height: 550
}
})
It could be your image link require("./assets/gradient_dark_orange_navy.png") is not correct so it does not show the image, try ramdon image to see if it work source={uri: "https://reactjs.org/logo-og.png"}
The problem is in your card styling(styles.card) inside Card.js file, You have given backgroundColor property inside styles.card object which is overriding your ImageBackground.
Just remove backgroundColor property from styles.card
card: {
width: deviceWidth - 32,
marginHorizontal: 16,
height: deviceWidth * 1,
borderRadius: 35,
},
How can I achieve this in react native?
So far I have this and I want to implement the middle curve. I don't know to either handle it with a transparent view or switch to SVG completely
and this the tabBar component
/* eslint-disable react/prop-types */
import React, { Component } from 'react'
import { TouchableOpacity, Text, StyleSheet, View } from 'react-native'
import { Colors } from 'App/Theme'
export default class TabBar extends Component {
render() {
let {
renderIcon,
getLabelText,
activeTintColor,
inactiveTintColor,
onTabPress,
onTabLongPress,
getAccessibilityLabel,
navigation,
showLabel,
} = this.props
let { routes, index: activeRouteIndex } = navigation.state
return (
<View style={styles.tabBar}>
{routes.map((route, routeIndex) => {
let isRouteActive = routeIndex === activeRouteIndex
let tintColor = isRouteActive ? activeTintColor : inactiveTintColor
return (
<TouchableOpacity
key={routeIndex}
style={styles.tab}
onPress={() => {
onTabPress({ route })
}}
onLongPress={() => {
onTabLongPress({ route })
}}
accessibilityLabel={getAccessibilityLabel({ route })}
>
{renderIcon({ route, focused: isRouteActive, tintColor })}
{showLabel ? <Text>{getLabelText({ route })}</Text> : null}
</TouchableOpacity>
)
})}
</View>
)
}
}
const styles = StyleSheet.create({
tab: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
},
tabBar: {
alignSelf: 'center',
backgroundColor: Colors.primary,
borderRadius: 50,
bottom: 10,
elevation: 2,
flexDirection: 'row',
height: 65,
position: 'absolute',
width: '95%',
},
infinity: {
width: 80,
height: 100,
},
infinityBefore: {
position: 'absolute',
top: 0,
left: 0,
width: 0,
height: 0,
borderWidth: 20,
borderColor: 'red',
borderStyle: 'solid',
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
borderBottomRightRadius: 50,
borderBottomLeftRadius: 0,
transform: [{ rotate: '-135deg' }],
},
infinityAfter: {
position: 'absolute',
top: 0,
right: 0,
width: 0,
height: 0,
borderWidth: 20,
borderColor: 'red',
borderStyle: 'solid',
borderTopLeftRadius: 50,
borderTopRightRadius: 0,
borderBottomRightRadius: 50,
borderBottomLeftRadius: 50,
transform: [{ rotate: '-135deg' }],
},
})
here is a demo: https://snack.expo.io/#nomi9995/cf371e
you need to use react-native-svg
yarn add react-native-svg
import React, { Component } from "react";
import {
Text,
StyleSheet,
View,
Dimensions,
TouchableHighlight,
} from "react-native";
import Svg, { Circle, Path } from "react-native-svg";
const tabs = [1, 2, 3, 4, 5];
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
pathX: "357",
pathY: "675",
pathA: "689",
pathB: "706",
};
}
render() {
return (
<View style={[styles.container]}>
<View style={[styles.content]}>
<View style={styles.subContent}>
{tabs.map((_tabs, i) => {
return (
<TouchableHighlight
key={i}
underlayColor={"transparent"}
onPress={() => console.log("onPress")}
>
<View>
</View>
</TouchableHighlight>
);
})}
</View>
<Svg
version="1.1"
id="bottom-bar"
x="0px"
y="0px"
width="100%"
height="100"
viewBox="0 0 1092 260"
space="preserve"
>
<Path
fill={"#373A50"}
stroke={"#373A50"}
d={`M30,60h${this.state.pathX}.3c17.2,0,31,14.4,30,31.6c-0.2,2.7-0.3,5.5-0.3,8.2c0,71.2,58.1,129.6,129.4,130c72.1,0.3,130.6-58,130.6-130c0-2.7-0.1-5.4-0.2-8.1C${this.state.pathY}.7,74.5,${this.state.pathA}.5,60,${this.state.pathB}.7,60H1062c16.6,0,30,13.4,30,30v94c0,42-34,76-76,76H76c-42,0-76-34-76-76V90C0,73.4,13.4,60,30,60z`}
/>
<Circle
fill={"#7EE6D2"}
stroke={"#7EE6D2"}
cx="546"
cy="100"
r="100"
/>
</Svg>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
overflow: "hidden",
},
content: {
flexDirection: "column",
zIndex: 0,
width: Dimensions.get("window").width - 30,
marginBottom: "4%",
left: "4%",
right: "4%",
position: "absolute",
bottom: "1%",
},
subContent: {
flexDirection: "row",
marginLeft: 15,
marginRight: 15,
marginBottom: 10,
zIndex: 1,
position: "absolute",
bottom: 5,
}
});
i hope this will help you.
Here is 2 solution according to your requirement.
If you want this type of design without selection then this code will help you :
https://github.com/alex-melnyk/clipped-tabbar
And if you need on each tab selection then here is other easy library for you :
https://github.com/Jm-Zion/rn-wave-bottom-bar
It's not obvious that this can be done with only <View/> components. I would split the TabBar into a flex row container with three subviews, and create an SVG with the filled inverted radius to be used in the center subview. To render the SVG, use react-native-svg. See a rough layout below:
...
import { SvgXml } from 'react-native-svg';
import TabCenterSvg from ‘assets/my-svg.svg’
export default class TabBar extends Component {
render() {
return (
<View style={styles.tabBar}>
<View style={styles.leftContainer}>
{/* Left Buttons */}
</View>
<View style={styles.centerContainer}>
<View style={styles.centerInnerTopContainer}>
{/* Add Button */}
</View>
<View style={styles.centerInnerBottomContainer}>
<SvgXml xml={TabCenterSvg} />
</View>
</View>
<View style={styles.rightContainer}>
{/* Right Icons */}
</View>
</View>
)
}
}
const styles = StyleSheet.create({
tabBar: {
alignSelf: 'center',
borderRadius: 50,
bottom: 10,
elevation: 2,
flexDirection: 'row',
height: 65,
position: 'absolute',
width: '95%',
},
leftContainer: {
flex: 1,
flexDirection: 'row',
borderBottomLeftRadius: 50,
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
backgroundColor: Colors.primary,
},
centerContainer: {
flex: 1,
flexDirection: 'column',
},
centerInnerTopContainer: {
flex: 1,
},
centerInnerBottomContainer: {
flex: 1,
},
rightContainer: {
flex: 1,
flexDirection: 'row',
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
borderBottomRightRadius: 50,
backgroundColor: Colors.primary,
},
})
Use this library's code and customize according to your UI
https://www.npmjs.com/package/curved-bottom-navigation-bar
Note: I'll not recommend this library as there are low weekly downloads.
Rather than using the whole library, you can use its code.
I am new in react native. I am designing the UI in which i want to design semi-circle or oval. i tried but the output is not as per the expectation. can we use canvas or svg in react native?
Actual:
Current:
Code.js
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={styles.circleSkyBlue}></View>
<View style={styles.circleViolet}></View>
</View>
code.css
circleViolet:{
width: 239,
height: 134,
borderBottomRightRadius: 50,
borderBottomLeftRadius: 100,
backgroundColor: '#596AB2',
transform: [
{scaleX: 1.2}
]
},
circleSkyBlue:{
width: 180,
height: 84,
borderBottomRightRadius: 100,
borderBottomLeftRadius: 50,
backgroundColor: '#69C0EC',
transform: [
{scaleX: 1}
] ,
overflow: 'hidden',
},
Any help is appreciated.
Thank you in advance
I have created a snack where you can check the example. No need to use egg here, you can use position to get the UI you want.
Snack: https://snack.expo.io/#ashwith00/ovals
Code:
import * as React from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import Constants from 'expo-constants';
const {width} = Dimensions.get('window')
const oval1Width = width * 0.5, oval2Width = width * 0.7;
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.oval1} />
<View style={styles.oval2} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
oval1: {
position: 'absolute',
width: oval1Width,
height: oval1Width,
borderRadius: oval1Width / 2,
backgroundColor: 'red',
top: -oval2Width / 3,
left: -10,
zIndex: 3,
},
oval2: {
position: 'absolute',
width: oval2Width,
height: oval2Width,
borderRadius: oval2Width / 2,
backgroundColor: 'blue',
top: -oval2Width / 2.5,
right: -10,
zIndex:2
},
});
I am working on the React-native App. Earlier the shadow working fine but now in the whole app, the shadow is not visible.
I know there are so many questions and solutions available on StackOverflow. I have tried everything but nothing works for me.
I have tried to add the backgroundColor like this:
const styles = StyleSheet.create({
shadow: {
shadowOffset: { width: 10, height: 10 },
shadowColor: 'black',
shadowOpacity: 1,
elevation: 3,
// background color must be set
backgroundColor : "#0000" // invisible color
}
I have also removed the overflow: 'hidden' ;
But no impact on the code.
I am using elevation for the android. And it's not working on any of the app screens. If someone facing the same issue please share the solution. TIA
This worked for me
{
paddingVertical: 12,
marginTop: 20,
marginBottom: 70,
width: '100%',
borderColor : 'gray',
borderWidth : 0.1,
paddingHorizontal : 12,
backgroundColor : '#fff',
margin:8,
width:'60%',
alignItems : 'center',
shadowOpacity: 0.25,
shadowRadius: 2,
shadowOffset: {
width: 0,
height: 2,
},
shadowColor: '#000000',
elevation: 4,
}
See below example which i created a Shadow box for both ios and android. i think this will help you.
import React, { Component } from 'react';
import { View, Text, Dimensions, Platform } from 'react-native';
const screenHieght = Dimensions.get('window').height;
class ShadowBox extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View style={styles.innerView}>
<View style={styles.outer}>
<Text style={{ textAlign: 'center' }}>card </Text>
</View>
<View style={styles.outer}>
<Text style={{ textAlign: 'center' }}>card </Text>
</View>
</View>
</View>
);
}
}
const styles = {
innerView: {
borderWidth: 1,
backgroundColor: Platform.OS === 'ios' ? '#fff' : null,
borderColor: '#ddd',
shadowColor: Platform.OS === 'ios' ? 'green' : '#fff',
shadowOffset: {
width: Platform.OS === 'ios' ? 3 : 0,
height: Platform.OS === 'ios' ? 3 : 2,
},
shadowOpacity: Platform.OS === 'ios' ? 1 : 0.8,
shadowRadius: Platform.OS === 'ios' ? null : 40,
elevation: Platform.OS === 'ios' ? null : 4,
justifyContent: 'center',
alignItems: 'center',
width: 300,
height: 300,
},
outer: {
margin: 10,
padding: 10,
alignSelf: 'center',
borderWidth: 1,
width: '80%',
overflow: 'hidden',
},
};
export default ShadowBox;
Feel free for doubts.
I've found this weird behavior in IOS (both on the simulator and on a real device, but I only have screenshots from the simulator) where on input to the TextInput component, it puts a weird highlight behind the text you input. I've referenced this (since closed) issue: https://github.com/facebook/react-native/issues/7070
And I've scoured the docs (https://facebook.github.io/react-native/docs/textinput) for an answer to this, but can't quite seem to come up with any answers. I thought I was close with the selectTextOnFocus prop, but I set that to false and nothing changed (the behavior remained).
I have also tried setting textDecorationColor and textShadowColor to transparent, to no avail. I am really at a loss of what to do right now.
Here is the code I have for the input:
import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
export class GeneralInput extends React.Component {
constructor(props) {
super(props);
this.state = {
placeholder: this.props.placeholder,
inputValue: "",
inputting: false,
};
}
whenInputIsFocused() {
this.setState({placeholder: ""});
}
whenInputIsBlurred() {
if (this.state.inputValue === "") {
this.setState({placeholder: this.props.placeholder});
}
}
focusNextField(nextField) { this.refs[nextField].focus(); }
render() {
const autoFocus = this.props.autoFocus == 'true';
const multiline = this.props.multiline == 'true';
return(
<View style={styles.outerContainer}>
<Text style={styles.labelText}>{this.props.labelText}</Text>
<TextInput
autoCapitalize='none'
autoFocus={autoFocus}
onChangeText={(inputValue) => this.setState({inputValue})}
value={this.state.inputValue}
secureTextEntry={this.props.secureTextEntry}
onBlur={this.whenInputIsBlurred.bind(this)}
onFocus={this.whenInputIsFocused.bind(this)}
underlineColorAndroid="transparent"
keyboardType={this.props.type}
returnKeyType={this.props.returnKeyType}
placeholder={this.state.placeholder}
placeholderTextColor='rgba(255, 255, 255, 0.3)'
multiline={multiline}
selectTextOnFocus={false}
onSubmitEditing={() => {this.focusNextField(this.props.ref)}}
blurOnSubmit={(this.props.moveAlongType === 'next') ? false : true}
style={styles.inputStyles} />
</View>
);
}
}
const styles = StyleSheet.create({
outerContainer: {
justifyContent: 'center',
alignItems: 'flex-start',
width: '90%',
marginBottom: 20,
},
labelText: {
fontFamily: 'rubik-bold',
fontSize: 14,
fontWeight: 'bold',
color: '#fff',
marginBottom: 5,
},
inputStyles: {
height: 40,
borderRadius: 2,
backgroundColor: 'rgba(255, 255, 255, 0.3);',
shadowColor: 'rgba(0, 0, 0, 0.15)',
shadowOffset: {width: 0,height: 2},
shadowOpacity: 0,
shadowRadius: 0,
width: '100%',
textDecorationColor: 'transparent',
fontSize: 14,
color: '#fff',
paddingLeft: 15,
fontFamily: 'rubik-bold',
},
});
And here are the screenshots of what is actually happening (the first screenshot is with the highlight, the second is just the input with the placeholder text for reference):
So the question is...how do I make that weird highlight go away on ios?
Text is not getting selected, it is just the background color you have given in the style.
Just remove the background color from the style of the <TextInput />
So, as per #Siraj the reason this odd behavior was happening was because the background color I had applied to the <TextInput /> component was also being applied to the text being inputed. So, I wrapped the <TextInput /> in a <View />, applied the height, width, backgroundColor, shadow, and borderRadius props to the surrounding <View />, and it has the desired effect! See the code below:
import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
export class GeneralInput extends React.Component {
constructor(props) {
super(props);
this.state = {
placeholder: this.props.placeholder,
inputValue: "",
inputting: false,
};
}
whenInputIsFocused() {
this.setState({placeholder: ""});
}
whenInputIsBlurred() {
if (this.state.inputValue === "") {
this.setState({placeholder: this.props.placeholder});
}
}
focusNextField(nextField) { this.refs[nextField].focus(); }
render() {
const autoFocus = this.props.autoFocus == 'true';
const multiline = this.props.multiline == 'true';
return(
<View style={styles.outerContainer}>
<Text style={styles.labelText}>{this.props.labelText}</Text>
<View style={styles.inputContainer}> // added View
<TextInput
autoCapitalize='none'
autoFocus={autoFocus}
onChangeText={(inputValue) => this.setState({inputValue})}
value={this.state.inputValue}
secureTextEntry={this.props.secureTextEntry}
onBlur={this.whenInputIsBlurred.bind(this)}
onFocus={this.whenInputIsFocused.bind(this)}
underlineColorAndroid="transparent"
keyboardType={this.props.type}
returnKeyType={this.props.returnKeyType}
placeholder={this.state.placeholder}
placeholderTextColor='rgba(255, 255, 255, 0.3)'
multiline={multiline}
selectTextOnFocus={false}
onSubmitEditing={() => {this.focusNextField(this.props.ref)}}
blurOnSubmit={(this.props.moveAlongType === 'next') ? false : true}
style={styles.inputStyles} />
</View> // Closing the added View
</View>
);
}
}
const styles = StyleSheet.create({
outerContainer: {
justifyContent: 'center',
alignItems: 'flex-start',
width: '90%',
marginBottom: 20,
},
labelText: {
fontFamily: 'rubik-bold',
fontSize: 14,
fontWeight: 'bold',
color: '#fff',
marginBottom: 5,
},
inputContainer: { // added styles
height: 40,
width: '100%',
backgroundColor: 'rgba(255, 255, 255, 0.3);',
shadowColor: 'rgba(0, 0, 0, 0.15)',
shadowOffset: {width: 0,height: 2},
shadowOpacity: 0,
shadowRadius: 0,
borderRadius: 2,
},
inputStyles: {
height: '100%',
width: '100%',
fontSize: 14,
color: '#fff',
paddingLeft: 15,
fontFamily: 'rubik-bold',
},
});