How to select and upload video in react native

Copy 
1npx react-native init RNVideo

Copy 
1cd RNVideo\android && gradlew clean

Copy 
1cd .. && npm start

Copy 
1npm install react-native-image-picker
2
3# RN >= 0.60
4cd ios && pod install
5
6# RN < 0.60
7react-native link react-native-image-picker

Copy 
1<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
2<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

Copy 
1import * as ImagePicker from 'react-native-image-picker';

Copy 
1/**
2* Select video & store in state
3*/
4selectVideo = async () => {
5    ImagePicker.launchImageLibrary({ mediaType: 'video', includeBase64: true }, (response) => {
6        console.log(response);
7        this.setState({ video: response });
8    })
9}

Copy 
1<TouchableOpacity onPress={() => this.selectVideo()} ><Icon name="videocam-outline" size={50} color={this.state.video ? "#fff" : "#6200ee"} /></TouchableOpacity>

Copy 
1/**
2* send feed details to server
3*/
4uploadVideo = async () => {
5    this.setState({ loading: true })
6    const { text, image, video } = this.state;
7    let errorFlag = false;
8
9    if (text) {
10        errorFlag = true;
11        this.setState({ textMessage: false });
12    } else {
13        errorFlag = false;
14        this.setState({ textMessage: true })
15    }
16
17    if (errorFlag) {
18        let formData = new FormData();
19
20        if (video) {
21
22            formData.append("videoFile", {
23                name: "name.mp4",
24                uri: video.uri,
25                type: 'video/mp4'
26            });
27        }
28
29        if (image) {
30            formData.append("image", image.base64);
31        }
32        
33        formData.append("text", text);
34        formData.append("user_id", userDetails.id);
35
36        fetch(base_url + 'newFeed.php', {
37            method: 'POST',
38            headers: {
39                'Content-Type': 'multipart/form-data',
40            },
41            body: formData
42        })
43            .then(response => {
44                return response.json();
45            })
46            .then(async (res) => {
47                this.setState({ loading: false });
48                console.log(res)
49
50                if(res.error == 0){
51                    this.props.navigation.navigate("Feed");
52                }
53
54            })
55            .catch(error => {
56                console.log(error);
57                this.setState({ loading: false });
58            });
59    } else {
60        this.setState({ loading: false });
61    }
62}

Copy 
1import React from 'react';
2import { StyleSheet, ScrollView, View, Dimensions, TouchableOpacity, Text } from 'react-native';
3import { TextInput, Button } from 'react-native-paper';
4import Icon from 'react-native-vector-icons/Ionicons';
5import * as ImagePicker from 'react-native-image-picker';
6
7const screen = Dimensions.get('window');
8export default class NewFeedScreen extends React.Component {
9
10
11    constructor(props) {
12        super(props);
13
14        this.state = {
15            text: "",               // to store text input
16            textMessage: false,     // text input message flag
17            loading: false,         // manage loader
18            image: "",              // store image
19            video: "",              // store video
20        }
21    }
22
23    /**
24     * Select image and store in state
25     */
26    selectImage = async () => {
27
28        ImagePicker.launchImageLibrary(
29            {
30                mediaType: 'photo',
31                includeBase64: true,
32                maxHeight: 200,
33                maxWidth: 200,
34            },
35            (response) => {
36                console.log(response);
37                this.setState({ image: response });
38            },
39        )
40    }
41
42    /**
43     * Select video & store in state
44     */
45    selectVideo = async () => {
46        ImagePicker.launchImageLibrary({ mediaType: 'video', includeBase64: true }, (response) => {
47            console.log(response);
48            this.setState({ video: response });
49        })
50    }
51
52    /**
53     * send feed details to server
54     */
55    createNewFeed = async () => {
56        this.setState({ loading: true })
57        const { text, image, video } = this.state;
58        let errorFlag = false;
59
60        if (text) {
61            errorFlag = true;
62            this.setState({ textMessage: false });
63        } else {
64            errorFlag = false;
65            this.setState({ textMessage: true })
66        }
67
68        if (errorFlag) {
69            let formData = new FormData();
70
71            if (video) {
72
73                formData.append("videoFile", {
74                    name: "name.mp4",
75                    uri: video.uri,
76                    type: 'video/mp4'
77                });
78            }
79
80            if (image) {
81                formData.append("image", image.base64);
82            }
83            
84            formData.append("text", text);
85            formData.append("user_id", userDetails.id);
86            var base_url = "https://yourdomain.com/";
87            fetch(base_url + 'newFeed.php', {
88                method: 'POST',
89                headers: {
90                    'Content-Type': 'multipart/form-data',
91                },
92                body: formData
93            })
94                .then(response => {
95                    return response.json();
96                })
97                .then(async (res) => {
98                    this.setState({ loading: false });
99                    console.log(res)
100
101                    if(res.error == 0){
102                        this.props.navigation.navigate("Feed");
103                    }
104
105                })
106                .catch(error => {
107                    console.log(error);
108                    this.setState({ loading: false });
109                });
110        } else {
111            this.setState({ loading: false });
112        }
113    }
114
115
116    render() {
117        return (
118            <View style={styles.SplashLayout}>
119                <ScrollView>
120                    <View style={styles.inputLayout}>
121                        <TextInput
122                            label="Text"
123                            value={this.state.text}
124                            multiline={true}
125                            numberOfLines={5}
126                            onChangeText={(text) => this.setState({ text })}
127                        />
128                        {
129                            this.state.textMessage && <Text style={styles.textDanger}>{"Text is required"}</Text>
130                        }
131                    </View>
132                    <View style={styles.MediaLayout}>
133                        <View style={[styles.Media, { marginRight: 10, backgroundColor: this.state.image ? "#6200ee" : "#ffffff" }]}>
134                            <TouchableOpacity onPress={() => this.selectImage()} ><Icon name="image-outline" size={50} color={this.state.image ? "#fff" : "#6200ee"} /></TouchableOpacity>
135                        </View>
136                        <View style={[styles.Media, { marginLeft: 10, backgroundColor: this.state.video ? "#6200ee" : "#ffffff" }]}>
137                            <TouchableOpacity onPress={() => this.selectVideo()} ><Icon name="videocam-outline" size={50} color={this.state.video ? "#fff" : "#6200ee"} /></TouchableOpacity>
138                        </View>
139                    </View>
140                    <View style={styles.inputLayout}>
141                        <Button icon="plus" mode="contained" onPress={() => this.createNewFeed()}>
142                            Feed
143                        </Button>
144                    </View>
145                </ScrollView>
146                {/* loader */}
147                {
148                    this.state.loading && <Text>Loading</Text>
149                }
150            </View>
151        )
152    }
153
154}
155
156const styles = StyleSheet.create({
157    SplashLayout: {
158        flex: 1,
159    },
160    inputLayout: {
161        paddingHorizontal: 20,
162        paddingVertical: 20,
163    },
164    textDanger: {
165        color: "#dc3545"
166    },
167    MediaLayout: {
168        paddingHorizontal: 20,
169        width: screen.width - 40,
170        flex: 1,
171        flexDirection: 'row',
172        alignItems: "center"
173    },
174    Media: {
175        width: (screen.width - 60) / 2,
176        height: (screen.width - 60) / 2,
177        backgroundColor: "#fff",
178        borderWidth: 1,
179        borderRadius: 10,
180        borderColor: "#fff",
181        justifyContent: "center",
182        alignItems: "center"
183    }
184});