Creating shadow design in react native - javascript

I am trying to create a UI in react-native like in the below picture:
Until now I can do only like this:
But is there any proper way to do that?
<View style={styles.frame1}>
<View style={styles.frameBefore}></View>
<View style={styles.frame2}>
<TextInput/>
</View>
</View>
frame1: {
flexDirection: 'row',
margin: 10,
borderColor: LightColorLine,
borderStyle:'solid',
borderWidth: 0.5,
backgroundColor: LightColorBackgr,
padding:10,
},
frame2:{
backgroundColor: LightColorTextBackgr,
padding: -50,
flex: 0.98,
},
frameBefore:{
width: 0,
height: 60,
borderRightWidth: 0.9,
borderColor: LightColorLine,
borderStyle:'solid',
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 10,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
flex: 0.01,
transform: [{
rotate: '45deg'
}]
},


Here is the closest I was able to get
The tricky part was creating the shadow on an angle, especially considering the API's React-Native provide for shadows differ so much between iOS and Android.
To overcome this I used a linear gradient which is not included by React Native by default. I used expo-linear-gradient but there a few others you can use if you would prefer.
export const Triangle = props => (
<View style={props.style}>
<LinearGradient
colors={['black', 'transparent']}
start={[0, 0]}
end={[0.5, 0.5]}
style={styles.triangleShadow}
/>
<View style={styles.triangle} />
</View>
);
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.card}>
<Text style={styles.text}>Be Cool.</Text>
<Triangle style={styles.topLeftTriangle} />
<Triangle style={styles.bottomRightTriangle} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 32,
},
text: {
fontSize: 18,
padding: 32,
paddingVertical: 48,
fontWeight: 'bold',
borderWidth: 1,
backgroundColor: '#F66F6F',
color: 'white',
borderColor: 'gray',
},
card: {
borderWidth: 1,
padding: 8,
borderColor: 'gray',
},
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: 80,
borderTopWidth: 80,
borderRightColor: 'transparent',
borderTopColor: '#ecf0f1',
},
triangleShadow: {
height: 90,
width: 90,
position: 'absolute',
top: 0,
left: 0,
},
topLeftTriangle: {
position: 'absolute',
top: -10,
left: -10,
},
bottomRightTriangle: {
position: 'absolute',
bottom: -10,
right: -10,
transform: [{ rotate: '180deg' }],
},
});

Related

How to prepare specific view? -RN

I'm new to app development. I want to prepare a different View like the picture below. I tried but I couldn't. When I did the View was not responsive. Is there an easier and more responsive way for me to do this?
I want to do:
My codes:
import React from "react"
import { Dimensions, StyleSheet, View } from "react-native"
const units = {
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
}
export default function Main( ) {
return (
<>
<View
style={styles.container}>
<View style={styles.leftBlock} />
<View style={styles.middleBlock} />
<View style={styles.rightBlock} />
</View>
<View style={styles.circle}/>
</>
)
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
bottom: 0,
flexDirection: 'row',
},
leftBlock:{
height: 50,
width: units.width / 3,
backgroundColor: "black",
borderTopRightRadius: 10
},
middleBlock:{
height: 50,
width: units.width / 3,
backgroundColor: "black",
},
rightBlock:{
height: 50,
width: units.width / 3,
backgroundColor: "black",
borderTopLeftRadius: 10
},
circle:{
position: 'absolute',
width: units.width / 2.5,
height: units.width / 2.5,
backgroundColor: 'white',
bottom: 10,
left: units.width / 3.35,
borderBottomRightRadius: 999,
borderBottomLeftRadius: 999,
}
})
My Codes Results:

Why is the screen not clickable when changing backgroundColor on react-native to transparent?

I have a code which will pop up and close the popup with a little animation in it. The problem arises when I add color to the background of the popup. Because when the popup is closed and the background color has changed, the screen can't be clicked.
I thought about removing the background, but I didn't know how. I think setting backgroundColor to transparent will solve my problem. But it only removes the previous color and makes the screen not clickable.
Previously I tried to use if else to close the background, but the animation on the application doesn't even work anymore.
Here is the code I attached:
import React, { useState, useRef } from 'react';
import { Text, View, TouchableHighlight, TouchableWithoutFeedback, Animated, KeyboardAvoidingView, Dimensions, ScrollView } from 'react-native';
const testScreen = () => {
const windowHeight = Dimensions.get('window').height;
const bounceValue = useRef(new Animated.Value(windowHeight)).current;
const [reportBackgroundColor, setReportBackgroundColor] = useState("");
const _toggleSubviewAppear = () => {
var toValue = 0;
Animated.spring(
bounceValue,
{
toValue: toValue,
velocity: 3,
tension: 2,
friction: 8,
}
).start();
setReportBackgroundColor("rgba(0, 0, 0, 0.2)");
};
const _toggleSubviewDisappear = () => {
var toValue = windowHeight;
Animated.spring(
bounceValue,
{
toValue: toValue,
velocity: 3,
tension: 2,
friction: 8,
}
).start();
};
console.log(JSON.stringify(reportBackgroundColor));
return (
<View style={{ flex: 1, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center' }}>
<TouchableHighlight onPress={() => {
_toggleSubviewAppear();
}}>
<View style={{borderRadius: 100, height: 50, width: 50, backgroundColor: 'pink', justifyContent: 'center', alignItems: "center"}}>
<Text>
Click to show
</Text>
</View>
</TouchableHighlight>
<View style={{ backgroundColor: reportBackgroundColor, flex: 1, top: 0, bottom: 0, right: 0, left: 0, position: 'absolute' }}>
<Animated.View style={{ transform: [{ translateY: bounceValue }], flex: 1, zIndex: 1000, position: 'absolute', bottom: 0, left: 0, right: 0 }} >
<KeyboardAvoidingView style={{ flex: 1 }}>
<View style={{ borderColor: "#E0E0E0", borderWidth: 1, borderTopLeftRadius: 40, borderTopRightRadius: 40, backgroundColor: 'white' }}>
<ScrollView showsVerticalScrollIndicator={false}>
<TouchableWithoutFeedback onPress={() => {
_toggleSubviewDisappear();
setReportBackgroundColor("transparent");
}}>
<View style={{ position: 'absolute', right: 27, top: 27, justifyContent: 'center', alignItems: 'center', borderRadius: 100, backgroundColor: 'white', borderWidth: 1, borderColor: '#E0E0E0', height: 29, width: 29 }}>
<Text>
X
</Text>
</View>
</TouchableWithoutFeedback>
<Text style={{ marginTop: 27, alignSelf: "center", fontSize: 19, color: "#333333" }}>Laporkan Penjual</Text>
<View style={{ marginBottom: 25 }}></View>
</ScrollView>
</View>
</KeyboardAvoidingView>
</Animated.View>
</View>
</View>
)
}

You are changing Animated parent view's background color, although you change it to transparent, it still there so that couldn't click the bottom view, is there you wand to change backgroundcolor? It seems have to change this one? backgroundColor: 'white' And then confirm the animated view truly closed, and the button should be clickable.

How can I achieve to have active pointy/arrow/triangle tabs on React Native?

It seems to be as if I need to use some extra css in order to achieve what you will see below:
I already have this component:
renderTabBar = props => (
<View style={tabViewStyles.tabBar}>
{props.navigationState.routes.map((route, i) => {
return (
<TouchableOpacity
key={route.key}
style={[
tabViewStyles.tabItem,
tabViewStyles.tabStyle,
tabViewStyles[`tabStyle_${i}`],
]}
onPress={() => this.setState({ index: i })}
>
<Text style={{ color: '#ffffff', fontFamily: 'montserratBold' }}>
{route.title}
</Text>
</TouchableOpacity>
);
})}
</View>
);
With this css on StyleSheet:
container: {
flex: 1,
},
tabBar: {
flexDirection: 'row',
paddingTop: Constants.statusBarHeight,
},
onWhite: {
color: globalStyles.whiteColor.color,
backgroundColor: globalStyles.whiteColor.backgroundColor,
},
bolderFont: {
fontFamily: 'montserratBold',
},
tabItem: {
flex: 1,
alignItems: 'center',
padding: 26,
},
tabStyle: {
marginHorizontal: 10,
marginTop: 20,
borderRadius: 2,
},
tabStyle_0: {
backgroundColor: '#ff5252',
},
tabStyle_1: {
backgroundColor: '#3da7dc',
},
});
With that above I get this:
So I am still missing the pointy part of the tab.
What else do I need to do?

You can use rotate property of Transforms as described here.
Minimal example:
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<View style={{width:50,height:50,backgroundColor:'green'}}></View>
<View style={{transform:[{rotateZ:'45deg'}],width:8,height:8,backgroundColor:'green',marginTop:-4}}></View>
</View>
Snack example here

If you want a pure styled solution and not an image you could do the following:
const triangle = {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: 50,
borderRightWidth: 50,
borderBottomWidth: 100,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#ff5252',
transform: [
{rotate: '180deg'}
]
}
const Triangle = React.createClass({
render: function() {
return (
<View style={[triangle, this.props.style]} />
)
}
})
Modified from https://codedaily.io/tutorials/22/The-Shapes-of-React-Native.

RTL support on react native

I am building a wordpress app using react native
I've used in the load of the app `import {I18nManager} from 'react-native';
I18nManager.forceRTL(true);`
to force the app to use RTL, it worked for me but in the postdetails it still showing LTR even after using
flexDirection: Constants.RTL ? 'row-reverse' : 'row' -> (for the label text)
here is my code for postdetails styles.js, please help me finding the solution for this issue
/** #format */
import { StyleSheet, Dimensions } from 'react-native'
import { Constants } from '#common'
const { width, height } = Dimensions.get('window')
const vw = width / 100
const vh = height / 100
export default StyleSheet.create({
body: {
flex: 1,
backgroundColor: '#fff',
width,
},
fill: {
flex: 1,
backgroundColor: '#ffffff',
},
card: {
width,
flexDirection: Constants.RTL ? 'row-reverse' : 'row',
},
box: {
width: vw * 40,
height: 100,
backgroundColor: '#ccc',
marginLeft: 20,
marginTop: 10,
marginBottom: 10,
},
header: {
position: 'absolute',
top: 0,
left: 0,
zIndex: 2,
right: 0,
backgroundColor: 'rgba(255, 255, 255, 0.5)',
overflow: 'hidden',
height: Constants.Window.headerHeight,
},
linearGradient: {
height: 50,
zIndex: 3,
width,
alignItems: 'flex-end',
justifyContent: 'flex-end',
position: 'absolute',
},
linearGradientBottom: {
height: 50,
bottom: 0,
zIndex: 3,
width,
alignItems: 'flex-end',
justifyContent: 'flex-end',
position: 'absolute',
},
headerIcon: {
height: 40,
position: 'absolute',
top: 0,
width,
zIndex: 4,
},
image: {
width: vw * 40,
height: 90,
resizeMode: 'cover',
marginLeft: 8,
marginTop: 20,
marginBottom: 10,
},
content: {
width: vw * 50,
marginLeft: 14,
marginTop: 20,
marginBottom: 30,
},
greyRow: {
backgroundColor: '#eee',
},
menuView: {
backgroundColor: '#F4F4F4',
height: 40,
},
menuItemView: {
marginTop: 6,
marginRight: 6,
marginBottom: 6,
marginLeft: 6,
height: 28,
},
menuItem: {
marginTop: 6,
marginRight: 16,
marginBottom: 6,
marginLeft: 16,
fontSize: 12,
fontWeight: '500',
color: '#8A939C',
},
menuItemActive: {
backgroundColor: '#fff',
borderRadius: 16,
borderWidth: 1,
borderColor: '#eee',
},
menuActiveText: {
color: '#000',
},
bannerImage: {
width,
height: width / 2 + 40,
backgroundColor: 'rgba(67, 130, 208, 0.2)',
},
placeHolderImage: {
alignItems: 'center',
width,
height: width / 3,
justifyContent: 'center',
backgroundColor: 'rgba(67, 130, 208, 0.2)',
},
backgroundOne: {
backgroundColor: 'rgba(58, 75, 133, 0.6)',
},
backgroundTwo: {
backgroundColor: 'rgba(188, 59, 36, 0.6)',
},
backgroundThree: {
backgroundColor: 'rgba(57, 174, 84, 0.6)',
},
bannerText: {
position: 'absolute',
bottom: 30,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
width: vw * 60,
},
bannerTitle: {
marginTop: 12,
marginRight: 12,
marginBottom: 2,
marginLeft: 12,
color: 'white',
fontSize: 15,
},
bannerDate: {
color: 'rgba(255, 255, 255, 0.7)',
fontSize: 9,
fontWeight: '500',
marginLeft: 12,
marginBottom: 12,
},
time: {
color: '#999',
fontSize: 12,
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
},
tagView: {
flexDirection: Constants.RTL ? 'row-reverse' : 'row',
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginBottom: 6,
},
tag: {
backgroundColor: '#aaa',
borderRadius: 12,
alignSelf: 'flex-end',
marginRight: 4,
},
tagText: {
fontSize: 9,
marginTop: 1,
marginRight: 8,
marginBottom: 1,
marginLeft: 8,
color: 'white',
fontWeight: '600',
},
hlist: {
flex: 1,
backgroundColor: 'white',
paddingTop: 0,
paddingRight: 0,
paddingBottom: 0,
paddingLeft: 0,
},
color: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: '#EBEBEB',
},
title: {
color: '#333',
fontSize: 22,
textAlign: 'center',
fontWeight: '200',
marginTop: 12,
},
titleSmall: {
fontSize: 13,
color: '#999',
textAlign: 'center',
marginBottom: 10,
marginTop: 4,
},
productItem: {
width: width - 30,
height: 400,
marginTop: 5,
marginRight: 5,
marginBottom: 5,
marginLeft: 5,
},
detailBlock: {
alignItems: 'center',
backgroundColor: '#fff',
paddingTop: 20,
paddingRight: 20,
paddingBottom: 20,
paddingLeft: 20,
width,
},
scrollView: {
backgroundColor: '#fff',
paddingTop: Constants.Window.headerHeight,
paddingBottom: 200,
},
scrollViewContent: {
position: 'relative',
zIndex: 9,
paddingBottom: 200,
},
innerContent: {
backgroundColor: '#fff'
},
detailDesc: {
color: '#333',
width: width - 20,
marginTop: 16,
marginRight: 16,
marginBottom: 2,
marginLeft: 13,
fontWeight: '500',
fontSize: 22,
textAlign: Constants.RTL ? 'right' : 'left',
},
largeImage: {
width,
height: width - 120,
resizeMode: 'cover',
},
largeContent: {
width,
position: 'absolute',
bottom: 0,
height: 100,
},
largeTitle: {
color: '#fff',
fontSize: 18,
paddingTop: 20,
paddingRight: 20,
paddingBottom: 0,
paddingLeft: 20,
},
description: {
backgroundColor: '#fff',
flexDirection: Constants.RTL ? 'row-reverse' : 'row',
},
imageBackGround: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
width,
height: Constants.Window.headerHeight
},
detailPanel: {
height: 380,
width,
alignItems: 'center',
justifyContent: 'flex-end',
},
toolbar: {
backgroundColor: 'black',
},
shareIcon: {
flexDirection: Constants.RTL ? 'row-reverse' : 'row',
width: 100,
position: 'absolute',
right: 0,
bottom: 16,
},
newsIcons: {
color: '#999',
marginLeft: 20,
},
newsTitle: {
fontSize: 18,
marginTop: 20,
marginRight: 20,
marginBottom: 20,
marginLeft: 20,
color: 'white',
fontWeight: '400',
textAlign: 'left',
backgroundColor: 'transparent',
},
avatar: {
width: 32,
height: 32,
borderRadius: 20,
resizeMode: 'cover',
marginTop: 12,
marginRight: 12,
marginBottom: 12,
marginLeft: 12,
},
wrapComment: {
paddingLeft: 15,
paddingRight: 15,
backgroundColor: '#F7F7F7',
flex: 2 / 6,
},
headCommentText: {
fontSize: 20,
fontWeight: '600',
},
titleVideo: {
flex: 1 / 6,
paddingLeft: 15,
paddingRight: 12,
},
titleVideoText: {
fontSize: 18,
color: 'rgb(11,6,6)',
lineHeight: 22,
fontWeight: 'bold',
},
countViews: {
flex: 1 / 6,
marginTop: 15,
marginLeft: 15,
marginBottom: 5,
},
countViewsText: {
fontSize: 18,
lineHeight: 18,
color: 'rgb(149,149,149)',
},
wrapLikeShare: {
flex: 1 / 6,
marginTop: 5,
marginRight: 10,
marginBottom: 5,
flexDirection: Constants.RTL ? 'row-reverse' : 'row',
justifyContent: 'flex-end',
},
wrapLikeShareInner: {
flexDirection: Constants.RTL ? 'row-reverse' : 'row',
},
icon: {
flexDirection: Constants.RTL ? 'row-reverse' : 'row',
marginRight: 10,
},
numberIcon: {
marginLeft: 5,
fontSize: 18,
},
author: {
color: '#999',
fontSize: 13,
fontWeight: '600',
marginTop: 12,
marginRight: 12,
marginBottom: 12,
marginLeft: 12,
textAlign: Constants.RTL ? 'right' : 'left',
},
relatedPostText: {
fontSize: 16,
fontWeight: 'bold',
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 10,
},
shareIcons: {
flexDirection: Constants.RTL ? 'row-reverse' : 'row',
justifyContent: 'flex-end',
position: 'absolute',
width,
right: 4,
top: 8,
zIndex: 10,
},
videoView: {
backgroundColor: 'rgba(0,0,0, .8)',
flex: 1,
},
video: {
height: vh * 45,
width,
backgroundColor: '#000',
},
spinkitView: {
backgroundColor: '#ffffff',
flex: 1,
height,
justifyContent: 'center',
position: 'absolute',
top: 0,
},
loadingContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
})

You need to reload the app after forceRTL.Check this link enter link description here
But I think this not a good solution.

How do make textinput background transparent on map on react-native

How can I make the outer textinput background transparent so that it look like its inside the map, not on top? Thanks in advance!
<View style={styles.container}>
<TextInput style={styles.input}/>
<MapView style={styles.map}/>
</View>
var styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
map: {
flex: 1,
},
input: {
height: 36,
padding: 10,
margin: 18,
fontSize: 18,
borderWidth: 1,
borderRadius: 10,
borderColor: '#48BBEC',
backgroundColor: 'rgba(0,0,0,0)',
}
})

Finally got it answer! Thanks to jpea!
<View style={styles.container}>
<MapView style={styles.map}/>
<View style={styles.inputView}>
<TextInput style={styles.input}/>
</View>
</View>
var styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
map: {
flex: 1,
},
inputView: {
backgroundColor: 'rgba(0,0,0,0)',
position: 'absolute',
top: 0,
left: 5,
right: 5
},
input: {
height: 36,
padding: 10,
marginTop: 20,
marginLeft: 10,
marginRight: 10,
fontSize: 18,
borderWidth: 1,
borderRadius: 10,
borderColor: '#48BBEC',
backgroundColor: 'white',
}
})

Try wrapping your text input in another view and setting that view's background to transparent:
<View style={styles.container}>
<MapView style={styles.map}/>
<View style={styles.inputWrapper}>
<TextInput style={styles.inputSearch}/>
</View>
</View>
inputWrapper: {
flex: 1,
backgroundColor: 'transparent',
position: 'absolute',
top: 0,
},
inputSearch: {
backgroundColor: 'rgba(0,0,0,0.4)', // 40% opaque
color: 'white',
}

Categories

Resources