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;
Related
I am learning to use react native with expo but at one point they ask me to make a button, the button they create looks good, they did it in android, but I want to do it in iOS and only the word changes color
We mostly use touchable Opacity as a button in React Native app because we have no deeper access to React Native button that's why.
Below is the use of Button made with Touchable Opacity
import React from 'react';
import { Text, StyleSheet, TouchableOpacity } from 'react-native';
import colors from '../../constants/colors';
const Button = props => { // normalText | whiteTheme
const style = props.normalText ? { fontWeight: 'bold', fontSize: 15, fontFamily: undefined } : {}
return (
<TouchableOpacity style={{ ...styles.button, ...props.style, backgroundColor: props.whiteTheme ? colors.secondary : colors.primary }} onPress={props.onPress}>
<Text style={{ ...styles.text, color: props.whiteTheme ? colors.primary : colors.secondary, ...style, ...props.textStyle }} numberOfLines={1} adjustsFontSizeToFit={true}>
{props.title}
</Text>
</TouchableOpacity>
);
}
export default Button;
const styles = StyleSheet.create({
button: {
backgroundColor: colors.secondary,
height: 40,
borderRadius: 6,
justifyContent: 'center',
alignItems: 'center'
},
text: {
color: colors.primary,
fontSize: 17.5,
fontFamily: 'bold'
},
});
I hope you got it!
Button component is more limited than the Touchables.
You can set many things on Touchables, and most useful is TouchableOpacity. Read this and see the example:
https://reactnative.dev/docs/touchableopacity
I am new to react native and need help. I created two components one
is for TextInput and another for button, I imported the Button
component in textInput and it show error. can someone help me figure
out the error I made here. I am getting error undefined is not an
object(evalutaing;?_reactnative,stylesheet.create')*
and folder structure in the picture attached
this is button Component
import React from 'react';
import { TouchableOpacity, Text, Stylesheet } from 'react-native';
export const Button = ({
style = {},
textStyle = {},
size = 125,
...props
}) => {
return (
<TouchableOpacity style={\[styles(size).radius, style\]}>
<Text style={\[styles.text, textStyle\]}>{props.title}</Text>
</TouchableOpacity>
);
};
**error is likely to be here**
const styles = (size) => Stylesheet.create({
radius: {
borderRadius: size / 3,
width: size,
hieght: size,
alignItems: 'center',
borderColor: 'white',
},
text: {
color: '#fff',
fontSize: 20,
},
});
this is textInput component
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { TextInput } from 'react-native-paper';
import { Card } from 'react-native-paper';
import {Button} from '../components/Button';
// You can import from local files
// or any pure javascript modules available in npm
export const Something = () => {
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}> input something here</Text>
<TextInput />
<Button title="+" />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
titleContainer: {
flex: 0.5,
padding: 20,
justifyContent: 'center',
},
title: {
fontWeight: 'bold',
color: 'white',
fontSize: 30,
},
});
Mispelled height maybe?
const styles = (size) => Stylesheet.create({
radius: {
borderRadius: size / 3,
width: size,
hieght: size, <-------------------- hieght
alignItems: 'center',
borderColor: 'white',
},
text: {
color: '#fff',
fontSize: 20,
},
});
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>
In my app, I have a screen that shows three rows that contain some text and a background image.
I used to only put the image, but I want to be able to press on the images to execute an action. This was my code before and it worked properly :
import React, { Component } from 'react'
import { ScrollView, View } from 'react-native'
import { useTranslation } from 'react-i18next';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useNavigation } from '#react-navigation/native';
import SelectorBox from '../../components/workout/SelectorBox';
const EXERCISE = require('../../assets/workout/exercise.jpg');
const MUSCLES = require('../../assets/workout/muscles.jpg');
const ROUTINE = require('../../assets/workout/routine.jpg');
export default function SelectorScreen() {
const {t} = useTranslation();
const navigation = useNavigation();
return (
<View style={{flex: 1, flexDirection: 'column', backgroundColor: "blue"}}>
<SelectorBox image={MUSCLES} title={t('workout.muscleGroups')} />
<SelectorBox image={EXERCISE} title={t('workout.exercises')} />
<SelectorBox image={ROUTINE} title={t('workout.routines')} />
</View>
)
}
import React from 'react'
import {Text, View, ImageBackground, StyleSheet, Dimensions} from 'react-native'
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
export default function SelectorBox(props) {
return (
<ImageBackground source={props.image} style={styles.background}>
<View style={styles.titleBar}>
<Text style={styles.title}>{props.title}</Text>
</View>
</ImageBackground>
)
}
const styles = StyleSheet.create({
background: {
flexDirection: "column",
alignItems: 'center',
justifyContent: 'center',
flex: 1,
width: Dimensions.get('window').width,
},
titleBar : {
width: Dimensions.get('window').width,
height: 60,
backgroundColor: '#ffb623',
justifyContent: 'center'
},
title: {
fontWeight: "900",
fontSize: 32,
alignSelf: 'center',
}
})
However, when I change the code, all my SelectorBox disappear...
export default function SelectorBox(props) {
return (
<TouchableWithoutFeedback style={styles.option}>
<ImageBackground source={props.image} style={styles.background}>
<View style={styles.titleBar}>
<Text style={styles.title}>{props.title}</Text>
</View>
</ImageBackground>
</TouchableWithoutFeedback>
)
}
const styles = StyleSheet.create({
option: {
flex: 1,
width: Dimensions.get('window').width,
// backgroundColor: 'red'
},
background: {
flexDirection: "column",
alignItems: 'center',
justifyContent: 'center',
flex: 1,
width: Dimensions.get('window').width,
},
titleBar : {
width: Dimensions.get('window').width,
height: 60,
backgroundColor: '#ffb623',
justifyContent: 'center'
},
title: {
fontWeight: "900",
fontSize: 32,
alignSelf: 'center',
}
})
I would like to be able to keep it like this screenshot everywhere. Right now, the screen is empty. (blue background, this is what i set it to)
Can you guide me ?
Try to debug the issue by steps.
Try and and import TouchableOpacity from react-native instead of react-native-gesture-handler. Does the backgroundColor: 'red' color works if uncomment it from the option style?
Change this:
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
to import from RN:
import { TouchableWithoutFeedback } from 'react-native'
You should consider of using TouchableOpacity instead of TouchableWithoutFeedback:
TouchableWithoutFeedback
Do not use unless you have a very good
reason. All elements that respond to press should have a visual
feedback when touched.
TouchableWithoutFeedback supports only one child. If you wish to have
several child components, wrap them in a View. Importantly,
TouchableWithoutFeedback works by cloning its child and applying
responder props to it. It is therefore required that any intermediary
components pass through those props to the underlying React Native
component.
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'}]
}
});