I want to achieve an animation each time a user taps on a button this shrinks in a smaller button.
GIF HERE
For this use TouchableHighlight component from react-native. It has onPressIn and onPressOut on which you can change buttons width and height.
e.g.
export const TouchableHighlightExample = () => {
const [BtnSize, setBtnSize ] = useState({ height: 40, width: "100%" });
const zoomIn=()=>{
setBtnSize({ height: 35, width: "90%",marginHorizontal:"5%" })
}
const zoomOut=()=>{
setBtnSize({ height: 40, width: "100%" })
}
return (
<View style={styles.container}>
<TouchableHighlight underlayColor="#ffffff00" onPressIn={zoomIn} onPressOut={zoomOut}>
<View style={[styles.button,BtnSize]}>
<Text style={{color: "white"}}>Touch Here</Text>
</View>
</TouchableHighlight>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10,
},
button: {
alignItems: 'center',
backgroundColor: 'red',
padding: 10,
borderRadius:40
},
});
Related
I want to create a design which I have attached, there are two buttons, when I click on unlimited credit the colour of the button should become red and limited should be white and when I click on limited the limited button should be red and unlimited colour should be white as shown in the image and also when I click on button it should call functions, the function will have some design part and there will be two functions one for unlimited and other for limited based on the button click it should call that function, please let me know how can I execute this.
Final Output:
Full code:
const ButtonContainer = () => {
const [btnOne, setBtnOne] = useState(false);
const [btnTwo, setBtnTwo] = useState(false);
const clickStyle = { backgroundColor: '#F5D9D0', borderColor: '#F3805E' }
return (
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => {
setBtnOne(true);
setBtnTwo(false);
}}
style={[
styles.button,
btnOne ? clickStyle : null,
]}>
<Text>Unlimited Credit</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
setBtnOne(false);
setBtnTwo(true);
}}
style={[
styles.button,
btnTwo ? clickStyle : null,
]}>
<Text>Limited Credit</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-evenly',
},
button: {
borderColor: 'grey',
borderWidth: 2,
padding: 10,
borderRadius: 20,
},
});
Live working example: Expo Snack
here's a snack I created: https://snack.expo.io/#yoobit0616/two-buttons
import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Button } from 'react-native-elements';
import Constants from 'expo-constants';
export default function App() {
const [disabledButton, setDisabledButton] = useState(true);
return (
<View style={styles.container}>
<View style={styles.buttonView}>
<Button
style={styles.button}
onPress={() => setDisabledButton(!disabledButton)}
buttonStyle={
disabledButton
? { backgroundColor: 'white' }
: { backgroundColor: 'red' }
}
titleStyle={{ color: 'black' }}
title="Unlimited Credit"></Button>
<Button
style={styles.button}
onPress={() => setDisabledButton(!disabledButton)}
buttonStyle={
!disabledButton
? { backgroundColor: 'white' }
: { backgroundColor: 'red' }
}
titleStyle={{ color: 'black' }}
title="Limited Credit"></Button>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
buttonView: {
flexDirection: 'row',
justifyContent: 'center',
},
button: {
height: 40,
width: 150,
marginLeft: 20,
borderRadius: 5,
borderWidth: 1,
},
});
How to add blur to a View in React Native, just like we apply it to an Image or BackgroundImage? If the view has translucent background using RGBA, I want to add blur to it also.
Sample Code
<ImageBackground style={styles.bg}>
<View style={styles.content} />
</ImageBackground>
const styles = StyleSheet.create({
bg: {
width: "100%",
height: "100%"
},
content:{
width: "70%",
height: "70%",
backgroundColor: "rgba(255,255,355,0.4)",
alignSelf: "center"
}
})
The easiest way is to do something like:
import React, { Component } from 'react';
import { View, Text, ImageBackground, StyleSheet } from 'react-native';
const BlurImage = () => {
return (
<ImageBackground source={require('your picture')} style={styles.ImageBackground}>
<View style={styles.container}>
<Text style={styles.text}> CSS Tricks </Text>
<Text style={styles.text}>You can style your Text and View as you deem fit</Text>
</View>
</ImageBackground>
);
}
export default BlurImage;
const styles = StyleSheet.create({
ImageBackground: {
flex: 1,
width: null,
height: null,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba( 0, 0, 0, 0.6 )',
},
text: {
color: 'white',
fontSize: 24
}
});
You can use opacity
const styles = StyleSheet.create({
bg: {
width: “100%”,
height: “100%”,
Opacity:0.5
},
content:{
width: “70%”,
height: “70%”,
backgroundColor: “rgba(255,255,355,0.4)”,
alignSelf: “center”
}
})
I have trouble understanding how ScrollView works in React Native. In my view, I have a scrollview that is wrapped in a containerview with containerStyle that has a flex:1. However the elements inside my view dont scroll..
render() {
const {containerStyle, eventsWrapperStyle, footerStyle} = styles
return (
<View style={containerStyle}>
<Header/>
<ScrollView style={eventsWrapperStyle}>
{this.renderEvents()}
{this.renderMonthlyStats()}
</ScrollView>
<Footer>
<View style={styles.footerButtonsWrapper}>
<Button customStyle={styles.footerButtonStyle} onPress = {() => this.props.resetAppInfo()}>NEW</Button>
<Button customStyle={styles.footerButtonStyle} onPress={() => this.props.logoutUser()}>SIGN OUT</Button>
</View>
</Footer>
</View>
)
}
const styles = {
monthlyStatsWrapper: {
margin: 10,
flexDirection: 'column'
},
monthlyStatsLine: {
width: '85%',
alignItems: 'center',
marginTop: 10,
flexDirection: 'row',
justifyContent: 'space-between'
},
containerStyle: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
},
footerButtonsWrapper: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
footerButtonStyle: {
width: 170
},
eventsWrapperStyle: {
marginTop: 50,
padding: 30,
flex: 1,
paddingBottom: 100,
}
};
Could you help me understand how scrollView works and make my elements inside it scroll ?
Here's the code for the Footer element which is absolutely positioned (might be part of the problem ?)
class Footer extends Component {
render(){
const { footerStyle } = styles;
return (
<View style={[footerStyle, this.props.customStyle]}>
{this.props.children}
</ View>
);
}
};
const styles = {
footerStyle: {
position: 'absolute',
width: '100%',
bottom: 0,
height: 130,
backgroundColor: '#FCFCFC'
}
};
I am trying to style a component but cant figure out how to do a couple of things.
1) I want to apply a background color to 100% of my component
return (
<TouchableWithoutFeedback
style={styles.touchable}
onPress={() =>
this.props.navigation.navigate('Quotes', { name: this.props.name })}
>
<View style={styles.viewStyle}>
<Image
source={this.props.image}
key={this.props.image}
style={styles.imageStyle}
/>
<Text style={styles.textStyle}> {this.props.name} </Text>
</View>
</TouchableWithoutFeedback>
);
}
}
const styles = {
imageStyle: {
height: 100,
width: 100
},
touchable: {
width: '100%',
backgroundColor: 'black'
},
viewStyle: {
height:100,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
backgroundColor: 'black'
},
textStyle: {
marginLeft: 20,
width: 120,
fontWeight: 'bold',
fontSize: 15
}
}
I tried to apply the background color to touchable tag a view tag but none of this work.
Moreover Id like to position my image at the top left of the component using justifyContent: flex-start. But my elements inside the view tag keeps staying centered.
How can I achieve these goals ?
The parent component is :
render() {
const {listStyle} = styles
return (
<ScrollView style={listStyle}>
{this.renderCharacters(this.props.matches)}
</ScrollView>
);
}
}
const styles = {
listStyle: {
width: '100%',
height: '100%'
}
}
before , I had problem with full size of width(100%)
In react native, width : 100% is not supported..
so I use var width = Dimensions.get('window').width; //full width this code.
But in this case, I want to place buttons on what I want to place like
in this photo
I want to place the hand!! buttons on the hand of body.
like width, in react native don't support % ..
so I want to place the buttons whatever the size of phone changes
this is my all codes
const MK = require('react-native-material-kit');
import React, { Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Dimensions,
ScrollView
} from 'react-native';
const {
MKButton,
MKColor,
} = MK;
const ColoredButton = MKButton.button()
.withBackgroundColor(MKColor.Amber)
.build();
const Fab = MKButton.coloredFab()
.withBackgroundColor(MKColor.Teal)
.build();
class Test extends Component {
render() {
return (
<ScrollView style={styles.scrollView}>
<Image
style={styles.Bodystyle}
resizeMode='contain'
source={require('./img/body.png')}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
<View style={styles.row}>
<ColoredButton
onPress={() => {
console.warn('hi, raised button!');
}}
>
<Text pointerEvents="none"
style={styles.Buttontext}>
Hand!!
</Text>
</ColoredButton>
<Fab>
<Text style={styles.Buttontext}>
Hand!!
</Text>
</Fab>
</View>
</Image>
</ScrollView>
);
}
}
var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height
const styles = StyleSheet.create({
scrollView:{
flex:1,
},
row :{
flexDirection:'row',
},
container: {
flexDirection: 'column',
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex:1
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
Buttonstyle:{
justifyContent: 'center',
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
Bodystyle:{
flexDirection:'column',
top: 0,
left: 0,
bottom: 0,
right: 0,
width: width,
height: height,
},
Buttontext:{
textAlign: 'center',
color: '#000000',
fontSize: 10,
}
});
AppRegistry.registerComponent('Test', () => Test);
I can be as simple as
const getPosition = (left, top, width, height) => ({
left: width * left,
top: height * top
})
For example
button: {
...(getPosition(0.7, 0.8, imageWidth, imageHeight))
}