I would like to add one of these slider toggle buttons to my react native app. Are there any easy ways to do this without starting from scratch?
Example video
The idea is make the background can be animated.
See the sample i've created.
Happy coding!
This is a basic example of how you can achieve this using Animated API.
import React from 'react';
import {
Animated,
Easing,
StyleSheet,
Pressable,
View,
Text,
} from 'react-native';
const App = () => {
const animatedValue = React.useRef(new Animated.Value(0)).current;
const startAnimation = (toValue) => {
Animated.timing(animatedValue, {
toValue,
duration: 400,
easing: Easing.linear,
useNativeDriver: false,
}).start();
};
const left = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: ['2%', '50%'],
extrapolate: 'clamp',
});
const scale = animatedValue.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [1, 0.9, 1],
extrapolate: 'clamp',
});
return (
<View style={styles.container}>
<View style={styles.sliderContainer}>
<Animated.View style={[styles.slider, { left }]} />
<Pressable
style={styles.clickableArea}
onPress={startAnimation.bind(null, 0)}>
<Animated.Text
style={[styles.sliderText, { transform: [{ scale }] }]}>
Active
</Animated.Text>
</Pressable>
<Pressable
style={styles.clickableArea}
onPress={startAnimation.bind(null, 1)}>
<Animated.Text
style={[styles.sliderText, { transform: [{ scale }] }]}>
History
</Animated.Text>
</Pressable>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
sliderContainer: {
width: '90%',
height: 50,
borderRadius: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#e0e0e0',
},
clickableArea: {
width: '50%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
},
sliderText: {
fontSize: 17,
fontWeight: '500',
},
slider: {
position: 'absolute',
width: '48%',
height: '90%',
borderRadius: 10,
backgroundColor: '#f4f4f4',
},
});
export default App;
Here you can check out the demo of how it works.
use native base tabs and then customize them .
this link will help you
https://docs.nativebase.io/Components.html#tabs-def-headref
Related
How can I add a border radius to my image from each side without affecting the username text? I want to make the image feel good by adding a border radius from each side like yt shorts so what I did I gave it borderTopLeftRadius borderTopRightRadius 30 each same with the bottom but then it makes the username text looks bad can you help me with that? I am using react native
import React from 'react';
import { StyleSheet, Text, View, Image, ActivityIndicator } from 'react-native';
import { useState } from 'react';
const PostCard = ({ username, profile_image, postImage }) => {
const [isLoading, setIsLoading] = useState(true);
return (
<View style={styles.container}>
<View style={styles.c1}>
<Image
source={{ uri: profile_image }}
style={styles.profilepic}
onLoadEnd={() => setIsLoading(false)}
/>
{isLoading && <ActivityIndicator style={styles.spinner} />}
<Text style={styles.username}>{username}</Text>
</View>
<Image
source={{ uri: postImage }}
style={styles.image} // this is the image that i want to style
onLoadEnd={() => setIsLoading(false)}
/>
{isLoading && <ActivityIndicator style={styles.spinner} />}
</View>
);
};
export default PostCard
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
width: '100%',
// height: 350,
borderRadius: 10,
marginVertical: 10,
overflow: 'hidden',
borderColor: 'white',
borderWidth: 1,
},
c1: {
width: '100%',
flexDirection: 'row',
alignItems: 'center',
padding: 10,
backgroundColor: 'black',
},
profilepic: {
width: 30,
height: 30,
borderRadius: 30,
borderColor: 'white',
borderWidth: 1,
},
username: {
color: 'white',
marginLeft: 10,
fontSize: 17,
fontWeight: 'bold',
},
image: {
width: '130%',
aspectRatio: 1,
}
})
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 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 want to save the drawings and notes I make with sketch-canvas in a device folder, but I can not find the form, I do not know how to do it.
I have studied and searched for forms, but I do not know how to apply it to this project.
I do not know if I have to create a module like the facebook documentation says
import React, { Component } from 'react'
import {
Platform,
StyleSheet,
Text,
View,
Alert,
} from 'react-native'
import RNSketchCanvas from '#terrylinla/react-native-sketch-canvas'
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<RNSketchCanvas
containerStyle={{ backgroundColor: 'transparent', flex: 1 }}
canvasStyle={{ backgroundColor: 'transparent', flex: 1 }}
defaultStrokeIndex={0}
defaultStrokeWidth={5}
closeComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Cerrar</Text></View>}
undoComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Deshacer</Text></View>}
clearComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Limpiar</Text></View>}
eraseComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Borrador</Text></View>}
strokeComponent={color => (
<View style={[{ backgroundColor: color }, styles.strokeColorButton]} />
)}
strokeSelectedComponent={(color, index, changed) => {
return (
<View style={[{ backgroundColor: color, borderWidth: 2 }, styles.strokeColorButton]} />
)
}}
strokeWidthComponent={(w) => {
return (<View style={styles.strokeWidthButton}>
<View style={{
backgroundColor: 'white', marginHorizontal: 2.5,
width: Math.sqrt(w / 3) * 10, height: Math.sqrt(w / 3) * 10, borderRadius: Math.sqrt(w / 3) * 10 / 2
}} />
</View>
)}}
saveComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Save</Text></View>}
savePreference={() => {
return {
folder: 'RNSketchCanvas',
filename: String(Math.ceil(Math.random() * 100000000)),
transparent: false,
imageType: 'png'
}
}}
//onSketchSaved={(success, filePath) => { alert('filePath: ' + filePath); }}
/>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
headerText: {
fontSize: 5,
textAlign: "center",
margin: 10,
fontWeight: "bold"
},
strokeColorButton: {
marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15,
},
strokeWidthButton: {
marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15,
justifyContent: 'center', alignItems: 'center', backgroundColor: '#39579A'
},
functionButton: {
marginHorizontal: 2.5, marginVertical: 8, height: 30, width: 60,
backgroundColor: '#39579A', justifyContent: 'center', alignItems: 'center', borderRadius: 5,
}
})
You should not create a database.
In this simple application there is a line that would be used to save, but I do not know how to use it.
I show you the code that I have.
Can you tell me how or where should I start?
EDIT:
I think this is the line that I should use to save the created bubbles:
// onSketchSaved = {(success, filePath) => {alert ('filePath:' + filePath); }}
But I do not know how to do it, I do not know what to add to save my drawings on Android
Thank you
From the RNSketchCanvas documentation:
onSketchSaved (function):
An optional function which accpets 2 arguments success and path. If success is true, image is saved successfully and the saved image path might be in second argument. In Android, image path will always be returned. In iOS, image is saved to camera roll or file system, path will be set to null or image location respectively.
Essentially, you are looking for the filepath where your image is stored.
If the image was stored in the camera roll (path is null) you can use the CameraRoll api to retrieve the image path.
Otherwise, you already have a file path for the image. If you then want to move the image you can make use of the moveFile function within React Native File System library (or FileSystem API if you are using Expo) to move the file to a folder of your choosing.
This is untested code but should provide a more tangible example of how this process may look:
import React, {Component} from 'react'
import {StyleSheet, Text, View, CameraRoll} from 'react-native'
import RNSketchCanvas from '#terrylinla/react-native-sketch-canvas'
import RNFS from 'react-native-fs';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<RNSketchCanvas
containerStyle={{ backgroundColor: 'transparent', flex: 1 }}
canvasStyle={{ backgroundColor: 'transparent', flex: 1 }}
defaultStrokeIndex={0}
defaultStrokeWidth={5}
closeComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Cerrar</Text></View>}
undoComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Deshacer</Text></View>}
clearComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Limpiar</Text></View>}
eraseComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Borrador</Text></View>}
strokeComponent={color => (
<View style={[{ backgroundColor: color }, styles.strokeColorButton]} />
)}
strokeSelectedComponent={(color, index, changed) => {
return (
<View style={[{ backgroundColor: color, borderWidth: 2 }, styles.strokeColorButton]} />
)
}}
strokeWidthComponent={(w) => {
return (<View style={styles.strokeWidthButton}>
<View style={{
backgroundColor: 'white', marginHorizontal: 2.5,
width: Math.sqrt(w / 3) * 10, height: Math.sqrt(w / 3) * 10, borderRadius: Math.sqrt(w / 3) * 10 / 2
}} />
</View>
)}}
saveComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Save</Text></View>}
savePreference={() => {
return {
folder: 'RNSketchCanvas',
filename: String(Math.ceil(Math.random() * 100000000)),
transparent: false,
imageType: 'png'
}
}}
onSketchSaved={this.onSave}
/>
</View>
</View>
)
}
onSave = async (success, path) => {
if(!success) return;
let imageUri;
const myNewImagePath = RNFS.DocumentDirectoryPath + 'my_folder'
try{
if(path == null){
// image has been saved to the camera roll
// Here I am assuming that the most recent photo in the camera roll is the saved image, you may want to check the filename
const images = await CameraRoll.getPhotos({first: 1});
if(images.length > 0){
imageUri = [0].image.uri;
}else{
console.log('Image path missing and no images in camera roll')
return;
}
} else{
imageUri = path
}
await RNFS.moveFile(imageUri, myNewImagePath)
} catch (e) {
console.log(e.message)
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
headerText: {
fontSize: 5,
textAlign: "center",
margin: 10,
fontWeight: "bold"
},
strokeColorButton: {
marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15,
},
strokeWidthButton: {
marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15,
justifyContent: 'center', alignItems: 'center', backgroundColor: '#39579A'
},
functionButton: {
marginHorizontal: 2.5, marginVertical: 8, height: 30, width: 60,
backgroundColor: '#39579A', justifyContent: 'center', alignItems: 'center', borderRadius: 5,
}
})
I have a grid view, inside each cell I have added a view and then an image , the image isn't centered the code is as follows
<ImageBackground
source={require('./images/marble.jpg')}
style={styles.backgroundImage}>
<GridView
itemDimension={130}
items={items}
style={styles.gridView}
renderItem={item => (
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
<View style={styles.CircleShapeView}>
<Image style={styles.iconItem} source={item.name}/>
</View>
</View>
)}
/>
</ImageBackground>
and styles are
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover', // or 'stretch'
},
CircleShapeView: {
width: 100,
height: 100,
borderRadius: 100,
backgroundColor: '#00BCD4'
},
gridView: {
paddingTop: 50,
flex: 1,
},
itemContainer: {
justifyContent: 'center',
alignItems:'center',
height:130
},
iconItem: {
alignItems:'center',
justifyContent: 'center'
}
});
the output looks like this
Image should be at the centre of the circle, but its not.
Your image is inside a view 'CircleShapeView'
CircleShapeView: {
width: 100,
height: 100,
borderRadius: 100,
backgroundColor: '#00BCD4',
justifyContent: 'center',
alignItems: 'center'
}
set in view
justifycontent:center
alignitems:center