I'm a 13-year-old react-native beginner. I would like to know why my buttons width isn't changing. I checked several websites but I couldn't;t find any answers. Please change my code and show what I did wrong.
Thank you.
import React from "react";
import {
ImageBackground,
StyleSheet,
Text,
View,
Button,
Alert,
} from "react-native";
const image = {
uri:
"https://images.unsplash.com/photo-1498036882173-b41c28a8ba34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
};
const ReactApp = () => (
<View style={styles.container}>
<ImageBackground source={image} style={styles.image}>
<Text style={styles.text}>React native</Text>
<Button
title="Button"
color="#042e6e"
onPress={() => Alert.alert("Button pressed")}
/>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center",
},
text: {
color: "white",
fontSize: 30,
fontWeight: "bold",
alignSelf: "center",
},
});
export default ReactApp;
You cant put styles directly to a button
you have to wrap it in a view and set the width of the view
<View style={{width:100}}>
<Button
title="Button"
color="#042e6e"
onPress={() => Alert.alert("Button pressed")}
/>
</View>
Related
I'm currently making an fitness app and would like to have a "start session" button on showcase of workout page... I've tried making it absolute and stuff like that, but when I scroll down the page the button is fixed to certain part of the page, But I would like it to go down and stay in the same view whenever I scroll.
This is my code:
import React from 'react';
import {Button, Text, View, StyleSheet, Image, TouchableOpacity} from 'react-native';
const Push_day_showcase = ({navigation}) => {
return(
<View style={styles.container1}>
<Text style={{color: 'white'}}>
This is push-day-showcase page!
</Text>
<TouchableOpacity style={styles.barButton} onPress={()=>navigation.navigate("Push day workout")}>
<Text>Start Session</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container1: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#202020',
},
barButton:{
alignItems: 'center',
padding:5,
paddingLeft: 15,
paddingRight: 15,
margin: 8,
marginBottom: 5,
marginTop: 20,
borderRadius: 10,
backgroundColor: 'red'
},
}
);
export default Push_day_showcase;
This is doable by using flexbox:
import { Text, View, StyleSheet, Button, Image, TouchableOpacity, ScrollView } from 'react-native';
import Constants from 'expo-constants';
// 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 (
<ScrollView contentContainerStyle={styles.container1}>
<View style={{flex: 1}}>
<Text style={{color: 'white', fontSize: 64}}>
This is push-day-showcase page!
This is push-day-showcase page!
This is push-day-showcase page!
</Text>
</View>
<TouchableOpacity style={styles.barButton}>
<Text>Start Session</Text>
</TouchableOpacity>
</ScrollView>
);
}
const styles = StyleSheet.create({
container1: {
flexGrow: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#202020',
padding: 32
},
barButton:{
alignItems: 'center',
padding:5,
paddingLeft: 15,
paddingRight: 15,
margin: 8,
marginBottom: 5,
marginTop: 20,
borderRadius: 10,
backgroundColor: 'red',
},
});````
i am using animated ScrollView and Modal. and i need this blurry background on modal shown on right pic.
how can i add this background to this modal? i want blurry effect without npm packages.
<Modal transparent={true}>
you want this: https://reactnative.dev/docs/imagebackground
and use the component prop blurRadius like:
import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";
const image = { uri: "https://reactjs.org/logo-og.png" };
const App = () => (
<View style={styles.container}>
<ImageBackground source={image} blurRadius={5} resizeMode="cover" style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: "center"
},
text: {
color: "white",
fontSize: 42,
lineHeight: 84,
fontWeight: "bold",
textAlign: "center",
backgroundColor: "#000000c0"
}
});
export default App;
I have been trying to update my screen dimensions in react native so that the component resizes on-screen rotation with no vain. I have created my style in a separate file (Styles.js) and imported the styles in my login page like below:
Styles.js
import {
StyleSheet,
Dimensions
} from "react-native";
import {
scale,
ScaledSheet
} from "react-native-size-matters";
const styles = ScaledSheet.create({
scrollViewContainer: {
backgroundColor: '#E20030',
alignItems: 'center',
height: Dimensions.get('window').height,
padding: '50#s'
},
container2: {
alignItems: 'center',
justifyContent: 'center',
width: Dimensions.get('window').width,
flex: 1,
},
loginRect: {
borderRadius: '30#s',
marginTop: '20#s',
width: Dimensions.get('window').width * 0.8,
backgroundColor: 'white',
alignItems: 'center'
},
SectionStyle: {
flexDirection: 'row',
marginTop: 0,
marginLeft: '35#s',
marginRight: '35#s',
borderWidth: '1#s',
borderRadius: '5#s',
borderColor: '#dadae8',
},
});
Login.js
import React, { } from 'react';
import {
Text, View, TextInput, TouchableOpacity,
KeyboardAvoidingView,
} from 'react-native';
import { mystyles, styles } from './Components/styles';
const LoginScreen = () => {
return (
<View style={mystyles.scrollViewContainer}>
<KeyboardAvoidingView behavior="padding" style={{ flex: 100 }}>
<View style={mystyles.scrollViewContainer}>
<View style={mystyles.loginRect}>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, marginLeft: 45, marginTop: 20 }}>
<Text style={{ color: 'black' }}>Username</Text>
</View>
</View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.input}
/>
</View>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, marginLeft: 45, marginTop: 20 }}>
<Text style={{ color: 'black' }}>Password</Text>
</View>
</View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.input}
/>
</View>
<TouchableOpacity>
<Text style={styles.buttonTextStyle}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
</View>
)
}
export default LoginScreen;
So I have tried using Dimensions onchange listener in my Styles.js but I get an error
ERROR Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
I created this function in the Styles.js file
m
function getDimensions() {
const [dimensions, setDimensions] = useState({
window,
screen
});
useEffect(() => {
const subscription = Dimensions.addEventListener(
"change",
({
window,
screen
}) => {
setDimensions({
window,
screen
});
console.log(dimensions.window.height + " +++ " + dimensions.screen)
}
);
// return () => subscription?.remove();
});
return dimensions.window;
}
Is there any way I can update the component sizes once the screen has been rotated?
This is working for me to detect rotation or changes in the size of the screen (split mode in tablets for example) without eventListeners.
import { Dimensions } from "react-native";
...
useEffect(() => {
...
}, [Dimensions.get("screen").height, Dimensions.get("screen").width]);
Hope this help to anybody
I am trying to create 6 customized button (3 buttons in each row) using TouchableOpacity. I was able to add the 3 buttons in the first row but when try to add the other three buttons in the next row, for some reason it pushes the the first row up. I want the gap/height between each rows to be at most 10px.
and my other question is, when I try to wrap the customized card with TouchableOpacity, it ignores the width I specify on the StyleSheet.
I am new to react native. So, if this is dumb question to ask, I apologize.
Here is the code I have,
//Card component
import React from "react";
import { StyleSheet, View, TouchableOpacity } from "react-native";
function Card(props) {
return (
<View style={{ ...styles.CardSytle, ...props.style }}>
{props.children}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
CardSytle: {
shadowColor: "black",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
elevation: 10,
backgroundColor: "white",
padding: 20,
borderRadius: 10,
marginHorizontal: 10,
marginVertical: 10,
},
});
export default Card;
//MainPage
import React from "react";
import { View, StyleSheet, Dimensions } from "react-native";
import Card from "../components/Card";
const MainPageScreen = (props) => {
return (
<View style={styles.body}>
<View style={styles.cardContainer}>
<Card style={styles.card} />
<Card style={styles.card} />
<Card style={styles.card} />
</View>
<View style={styles.cardContainer}>
<Card style={styles.card} />
<Card style={styles.card} />
<Card style={styles.card} />
</View>
</View>
);
};
const styles = StyleSheet.create({
body: {
flex: 1,
backgroundColor: "white",
},
cardContainer: {
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
card: {
width: Dimensions.get("window").width / 3,
maxWidth: "28%",
height: 150,
maxHeight: "28%",
},
});
export default MainPageScreen;
//Here is screenshot of the buttons
[1]: https://i.stack.imgur.com/9z84U.png
You are setting a maxHeight of 28% which is setting the button height to 28% of parent and creates a blank space under the row. So you should remove it.
card: {
width: Dimensions.get('window').width / 3,
maxWidth: '28%',
height: 150,
},
As for the touchable opacity, Rather than wrapping the view you can use it as the main wrapper and style it Like below.
function Card(props) {
return (
<TouchableOpacity style={[styles.CardSytle, props.style]}>
{props.children}
</TouchableOpacity>
);
}
I am new to react. I want to create a vertical button using react native. How can I do that? The required image of button is attached for your reference. Any help would be really appreciated.
Here is a simple way to do it using Switch:
(First picture: IOS, Second picture: Android)
import React, { Component } from 'react';
import { Text, View, StyleSheet, Switch } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
state = {
accept: false
}
render() {
return (
<View style={styles.container}>
<View style={{flex: 2, alignItems: "center"}}>
<Text>Turn on the switch when you want to accept work, and turn it off when you dont!</Text>
</View>
<View style={{flex: 1, alignItems: "center"}}>
<Switch
style={styles.verticalSwitch}
value={this.state.accept}
onTintColor="blue"
onValueChange={() => this.setState({accept:!this.state.accept})}
/>
<Text style={{marginTop: 12}}>
{this.state.accept ? "on" : "off"}
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
paddingHorizontal: 20,
},
verticalSwitch: {
transform: [{ rotate: '-90deg'}]
}
});