Вы должны сделать пользовательский компонент. Вот пример использования перетаскиваемого вида и индикатора выполнения, которого вы можете достичь:
Пример кода: ----
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React,{Component} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
TouchableOpacity,
Animated
} from 'react-native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import Icon from 'react-native-vector-icons/FontAwesome';
import SplashScreen from 'react-native-splash-screen';
import firebase from 'react-native-firebase';
import { SwipeListView } from 'react-native-swipe-list-view';
import { Pages } from 'react-native-pages';
import Swipeable from 'react-native-gesture-handler/Swipeable';
// import SQLite from 'react-native-sqlite-storage';
import SQLite from "react-native-sqlite-storage";
import RadialGradient from 'react-native-radial-gradient';
import YouTube, { YouTubeStandaloneAndroid } from 'react-native-youtube';
import * as Progress from 'react-native-progress';
import Draggable from 'react-native-draggable';
// SQLite.enablePromise(true);
// const db = SQLite.openDatabase
const successcb = (response) => {
console.log('>>>>>>>>>>>>>>>>>>>:::::::'+ JSON.stringify(response))
}
const errorcb = (response) => {
console.log('<<<<<<<<<<<<<<<<<<<<<<'+response.openError)
}
var db = SQLite.openDatabase({name: 'DailyDigitalPlanner.db', location : 'default'}, successcb, errorcb);
// Initialize Firebase
// const Firebase = firebase.initializeApp(firebaseConfig)
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
email: 'pramodk@xyz.com', // init opacity 0
password: 'temp123',
listViewData: [
'asdasd',
'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
'First Item',
],
progressLevel: 50/200,
initialMarkerY: 140
};
}
componentDidMount() {
// do stuff while splash screen is shown
// After having done stuff (such as async tasks) hide the splash screen
SplashScreen.hide();
// const currentUser = firebase.auth();
// console.log(currentUser)
// this.getPlans();
// var db = SQLite.openDatabase({name: 'DailyDigitalPlanner.db', location: 'default'});
}
getPlans(){
// console.log('>>>>>>>>>>>>>>>>>>>>>>>>>');
// db.enablePromise(true)
// var create'CREATE TABLE IF NOT EXISTS Product (prodId, prodName, prodDesc, prodImage, prodPrice)'
var createTable = "CREATE TABLE IF NOT EXISTS plans (user_id INTEGER , Title TEXT NOT NULL );"
var insertRow = "INSERT INTO plans (user_id, Title) values(15,'Morning Breakfast')"
db.transaction(function (txn) {
console.log('>>>>>>>>>>>>>>>>>>>>>>>>>')
txn.executeSql("select * from plans", [], (tx, results) => {
console.log('results+++++++++', results.rows.item(1));
// console.log('tx+++++++++', tx);
db.close();
},(error)=>{
console.log('error+++++++++', error);
});
})
}
handleSignUp(){
const { email, password } = this.state
Firebase.auth()
.createUserWithEmailAndPassword(email, password)
.then(() => console.log('success'))
.catch(error => console.log(error))
}
handleUpdateUserData(){
const currentUser = firebase.auth().currentUser;
console.log(currentUser);
if (currentUser) {
currentUser.updateProfile({
displayName: 'Promo',
firstName: 'Pramod'
})
.then(()=>{
const currentUser = firebase.auth().currentUser;
console.log('Success==='+ JSON.stringify(currentUser));
})
.catch(function(error) {
// An error happened.
console.log(error)
});
}
}
handleLogin(){
firebase.auth()
.signInWithEmailAndPassword('pramodk@xyz.com', 'temp123')
.then((e) => console.log('successful login :::'+JSON.stringify(e)))
.catch((error) => console.log('successful login :::'+error))
const currentUser = firebase.auth();
console.log(currentUser)
}
handleSignout(){
firebase.auth().signOut().then(function() {
// Sign-out successful.
})
.then(()=>{console.log('Logout succesfully')})
.catch(function(error) {
// An error happened.
});
}
handleCreateNode(){
var config = {
databaseURL: "https://habbit-a12fd.firebaseio.com",
projectId: "habbit-a12fd",
};
// firebase.initializeApp(config);
const user = firebase.auth().currentUser;
// console.log(currentUser.email);
firebase.database().ref('Users/'+user.uid+'/userData').set({
email: 'pramodk@xyz',
firstName:'pramod k',
lastName:'kumar',
// userId: currentUser.uid
}).then((data)=>{
//success callback
console.log('data ' , data)
}).catch((error)=>{
//error callback
console.log('error ' , error)
})
// const currentUser = firebase.auth();
// // console.log(currentUser)
// const mDatabase = firebase.database();
// mDatabase.child("numbers").push().setValue(1);
}
renderLeftActions(progress, dragX){
const trans = dragX.interpolate({
inputRange: [0, 50, 100, 101],
outputRange: [-20, 0, 0, 1],
});
return (
<TouchableOpacity style={{height:50, backgroundColor:'yellow'}} >
<Animated.Text
style={[
styles.actionText,
{
transform: [{ translateX: trans }],
},
]}>
Archive
</Animated.Text>
</TouchableOpacity>
);
};
playBack(){
console.log(">>>")
YouTubeStandaloneAndroid.playVideo({
apiKey: 'AIzaSyBmmEUqceTPDvWW7395zzTiVC_XbJVi7cU', // Your YouTube Developer API Key
videoId: 'KVZ-P-ZI6W4', // YouTube video ID
autoplay: true, // Autoplay the video
startTime: 120, // Starting point of video (in seconds)
fullscreen: false,
})
.then(() => console.log('Standalone Player Exited'))
.catch(errorMessage => console.error(errorMessage))
}
onDragg(e){
var percentage = 0;
var markerY = 0;
console.log(e)
if (e.pageY > 200) {
console.log('i am greater then 200')
markerY = 150;
percentage = 0;
}else if (e.pageY < 0) {
console.log('i am less then 0')
markerY = 0;
percentage = 1;
}else{
console.log('i am in between then 0 and 200')
markerY = e.pageY;
percentage = (200-e.pageY) / 200
}
console.log('>>>'+e.pageY)
this.setState({
progressLevel: percentage,
initialMarkerY:markerY
})
}
render() {
return (
<View style={{ flex: 1, backgroundColor: 'white', alignItems:'center' }}>
<View style={{backgroundColor:'transparent', height:200, justifyContent:'center', alignItems:'center'}} onLayout={({nativeEvent}) => {console.log(nativeEvent) }} >
<Progress.Bar progress={this.state.progressLevel} width={200} height={50} style={{ transform: [{ rotate: '-90deg', backgroundColor:'green' }] }} />
<Draggable x={10} y={this.state.initialMarkerY} renderSize={50} maxX={75} minX={75} maxY={200} minY={0} renderColor='grey' renderText={Math.round(this.state.progressLevel.toFixed(2)*100)} isCircle onRelease={({nativeEvent})=>{this.onDragg(nativeEvent)}} />
<Draggable x={75} y={150} renderSize={50} maxX={75} minX={75} maxY={200} minY={0} renderColor='transparent' renderText='A' onRelease={({nativeEvent})=>{this.onDragg(nativeEvent)}} />
</View>
<Text style={{marginTop:20}}>Drag the A character to increase the bar status</Text>
</View>
);
}
}
const styles = StyleSheet.create({
leftAction: {
flex: 1,
backgroundColor: 'cyan',
justifyContent: 'center',
},
actionText: {
color: 'black',
fontSize: 16,
},
rectButton: {
width:'100%',
height: 80,
backgroundColor: 'blue',
},
});
