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:
Related
Hi i'm new in REACT NATIVE, i have a in my react native app, with style of a card like the code below. first i want to split it into two horizontally parts with the ratio of( 3 for upper part and 2 for lower part). And second i want to write on each part.
I
import React from "react";
import {
Button,
StyleSheet,
Text,
View,
TouchableHighlight,
TouchableOpacity,
} from "react-native";
export default function App() {
return(
<View style={styles.card}>
<View style={styles.results}>
<Text style={styles.texty}>numbers</Text>
</View>
<View style={styles.calculations}>
<Text>numbers</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
card: {
flex: 1,
width: "80%",
height: 100,
shadowColor: "black",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
elevation: 5,
backgroundColor: "white",
padding: 100,
borderRadius: 15,
marginTop: 80,
margin: 42,
justifyContent: "center",
},
texty: {
fontSize: 30,
},
calculations: {
fontSize: 34,
},
results: {
flex: 6,
paddingTop: 25,
justifyContent: "center",
alignItems: "flex-end",
borderBottomWidth: 0.3,
borderBottomColor: "grey",
});
brought my code down there
Please use flex property to achieve this like:
card: { flex: 1 }
results: { flex: .6, flexWrap:'wrap'}
calculations: {flex:.4, flexWrap:'wrap'}
P.S:
You can add other styles as you like but don't use height property.
I'm making an app, I've still only made the splash screen. But, I want to know how to navigate to the next screen on a touchable opacity click. I don't want to navigate by creating a specific function for the pages. I want to navigate by importing the page.
I have shown my code below.
import React from 'react';
import { Image, StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import { AppLoading } from 'expo';
import { useFonts } from 'expo-font';
const src2 = {
uri: "https://o.remove.bg/downloads/e6dc1218-7a94-4c86-a3b9-6baed9ee6c63/images-removebg-preview.png"
}
const src = {
uri: "https://o.remove.bg/downloads/7ce84ac7-f275-434c-a294-11a8b2e56e2b/pngtree-halo-victory-light-effect-png-image_1727940-removebg-preview.png"
}
function Levels({ navigation }) {
return (
<levels />
);
}
export default props => {
let [fontsLoaded] = useFonts({
'Sketch 3D': 'https://dafonttop.com/wp-data/s/870/1870/file/sketch-3d.regular.otf',
});
if (!fontsLoaded) {
return <AppLoading />;
} else {
return (
<View style={styles.container}>
<Text style={styles.title}>My app</Text>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Start</Text>
</TouchableOpacity>
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#CFA240",
alignItems: "center",
justifyContent: "center",
},
title: {
fontFamily: "Sketch 3D",
fontSize: 50,
color: "#fff",
position: "absolute",
top: 150
},
glow: {
position: "absolute",
top: 45,
left: 20,
width: 200,
height: 200,
},
mop: {
top: 45,
left: 10,
height: 225,
width: 225,
},
images: {
position: "absolute",
top: 220,
},
button: {
position: "absolute",
bottom: 150,
padding: 15,
borderRadius: 16,
borderColor: "#fff",
borderWidth: 2,
backgroundColor: "#CFA240",
borderStyle: "dashed",
elevation: 10,
},
buttonText: {
fontFamily: "Sketch 3D",
color: "#fff",
fontSize: 25,
}
})
PS I have to go to the next screen by importing the file
Thank you.
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Home')}>
<Text>GO TO HOME</Text>
</TouchableOpacity>
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.
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' }],
},
});
I try to implement a sliding bar and bond the sliding animation to a TouchableOpacity.
I initialized the parameter as sliderPosition: new Animated.Value(0)
the onPress function is :
onPress: function(event){
Animated.timing(this.state.sliderPosition, {
toValue: 202.5,
duration: 100,
easing: Easing.linear,
}).start();
},
I kept getting this error
[tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: singleValue.stopTracking is not a function. (In 'singleValue.stopTracking()', 'singleValue.stopTracking' is undefined)
layout for the slider is:
<View style = {styles.sliderContainer}>
<Animated.View style = {[styles.slider, {marginLeft:this.state.sliderPosition}]}>
</Animated.View>
</View>
styles:
sliderContainer: {
position: 'absolute',
top: 138,
left: 0,
right: 0,
height: 5,
backgroundColor: '#E15668',
shadowRadius: 1,
shadowOpacity: 0.5,
shadowColor: 'gray',
shadowOffset: {width: 0, height: 2},
opacity: 0.9
},
slider: {
marginTop: 0,
backgroundColor: '#FCC31B',
width: 120,
height: 5,
},
did I do something wrong?
Are you sure that sliderPosition property on your state remains an instance of Animated.Value? That error you're getting speaks to that being the issue. Here is a complete example using your code snippets that works as you'd expect. Try this out and if the snippet doesn't help solve your issue, please post more of your surrounding code to lend more context:
import React from 'react';
import {
Animated,
AppRegistry,
Easing,
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
class MyApp extends React.Component {
constructor(props) {
super(props);
this.onPress = this.onPress.bind(this);
this.state = {
sliderPosition: new Animated.Value(0)
}
}
onPress(event){
Animated.timing(this.state.sliderPosition, {
toValue: 202.5,
duration: 100,
easing: Easing.linear,
}).start();
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.onPress}>
<Text>Animate It</Text>
</TouchableOpacity>
<View style = {styles.sliderContainer}>
<Animated.View style = {[styles.slider, {marginLeft:this.state.sliderPosition}]}>
</Animated.View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
sliderContainer: {
position: 'absolute',
top: 138,
left: 0,
right: 0,
height: 5,
backgroundColor: '#E15668',
shadowRadius: 1,
shadowOpacity: 0.5,
shadowColor: 'gray',
shadowOffset: {width: 0, height: 2},
opacity: 0.9
},
slider: {
marginTop: 0,
backgroundColor: '#FCC31B',
width: 120,
height: 5,
}
});
AppRegistry.registerComponent('MyApp', () => MyApp);