TIKTOK Clone React Native Tutorial 2021 👨💻 I'll show you how you can do this in the simplest way and terms possible. By the end of this series you'll have learned how the big companies do it and will be able to do the same, you not only will be able to do this app, but you'll be able to put what you learn into your very own projects! In this series, we use React Native with Expo to quickly deploy the project. We use firebase for all our microservice needs like the auth system, database, storage, amongst others. firebase, redux, react native, javascript, expo. In this series, we'll use all of them and you'll learn them by doing an iconic app. Welcome to this Simcoder project and make a TikTok Clone!
License: MIT License
Welcome to my github page. I run a youtube chanel focused on coding called simcoder and in this github you'll find every single piece of source code written in every coding video.
Feel free to check out everything I do if you find any error or have a suggestion do live an issue 🚩
What the terminal says when I try to bring a video into the application I'm making is that Do you have a screen named "savePost" This is where I am trying to navigate
return ( <NavigationContainer> <Stack.Navigator> {currentUserObj.currentUser == null ? <Stack.Screen name = "auth" component = {AuthScreen} options = {{headerShown: false}}/> : <> <Stack.Screen name="home" component = {HomeScreen} options = {{headerShown: false}}/> <Stack.Screen name="savePost" component = {SavePostScreen} options = {{headerShown: false}}/> </> } </Stack.Navigator> </NavigationContainer>
This is the part where I use navigation.navigate, i tried navigation.push and to navigate without the useNavigation() both did not work.
`const pickFromGallery = async()=>{
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Videos,
allowsEditing: true,
aspect: [16,9],
quality: 1
})
if(!result.cancelled){
let sourceThumb = await generateThumbnail(result.uri)
navigation.navigate("savePost", {source: result.uri, sourceThumb})
}
}I can put the SavePostScreen code here as well, but I doubt it will do anything, I am just putting the package.json file here. "name": "academical",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios"
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/material-bottom-tabs": "^6.2.3",
"@react-navigation/native": "^6.0.12",
"@react-navigation/stack": "^6.2.3",
"expo": "^46.0.9",
"expo-av": "~12.0.4",
"expo-camera": "~12.3.0",
"expo-constants": "~13.2.3",
"expo-image-picker": "~13.3.1",
"expo-media-library": "~14.2.0",
"expo-splash-screen": "~0.16.2",
"expo-status-bar": "~1.4.0",
"expo-video-thumbnails": "~6.4.0",
"firebase": "^8.10.1",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.5",
"react-native-gesture-handler": "^2.6.0",
"react-native-linear-gradient": "^2.6.2",
"react-native-paper": "^4.12.4",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "~3.15.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.7",
"react-navigation": "^4.4.4",
"react-redux": "^8.0.2",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1"
},
"devDependencies": {
"@babel/core": "^7.12.9"
}
}`
I'm getting uninitialized values. Needs refactoring to remove the need for a cycle.
Require cycle: src\screens\profile\index.js -> src\navigation\feed\index.js -> src\screens\profile\index.js
using the index.js file from this GH repo, i got errors like the ones below (indentation, strings must use double quote, missing semicolon). attached is original file with syntax errors resolved, perhaps will save time if others run into same issue. thank you SimCoderYoutube for making the source code available & creating the youtube tutorials.
9:1 error Expected indentation of 2 spaces but found 4 indent
10:1 error Expected indentation of 6 spaces but found 8 indent
11:1 error Expected indentation of 6 spaces but found 8 indent
12:1 error Expected indentation of 6 spaces but found 8 indent
12:50 error Missing semicolon semi
13:3 error Missing semicolon semi
16:1 error This line has a length of 102. Maximum allowed is 80 max-len
16:51 error Strings must use doublequote quotes
17:1 error Expected indentation of 2 spaces but found 4 indent
17:23 error Missing semicolon semi
18:1 error Expected indentation of 2 spaces but found 4 indent
18:32 error Strings must use doublequote quotes
19:1 error Expected indentation of 4 spaces but found 8 indent
20:1 error Expected indentation of 6 spaces but found 12 indent
20:67 error Missing trailing comma comma-dangle
21:1 error Expected indentation of 4 spaces but found 8 indent
21:10 error Missing semicolon semi
22:1 error Expected indentation of 2 spaces but found 4 indent
23:1 error Expected indentation of 2 spaces but found 4 indent
23:32 error Strings must use doublequote quotes
24:1 error Expected indentation of 4 spaces but found 8 indent
25:1 error Expected indentation of 6 spaces but found 12 indent
25:64 error Missing trailing comma comma-dangle
26:1 error Expected indentation of 4 spaces but found 8 indent
26:10 error Missing semicolon semi
27:1 error Expected indentation of 2 spaces but found 4 indent
28:1 error Expected indentation of 2 spaces but found 4 indent
29:1 error Expected indentation of 6 spaces but found 8 indent
30:1 error Expected indentation of 6 spaces but found 8 indent
31:1 error Expected indentation of 6 spaces but found 8 indent
31:27 error Missing semicolon semi
32:3 error Missing semicolon semi
34:1 error This line has a length of 102. Maximum allowed is 80 max-len
34:51 error Strings must use doublequote quotes
35:1 error Expected indentation of 2 spaces but found 4 indent
35:23 error Missing semicolon semi
36:1 error Expected indentation of 2 spaces but found 4 indent
36:32 error Strings must use doublequote quotes
37:1 error Expected indentation of 4 spaces but found 8 indent
38:1 error Expected indentation of 6 spaces but found 12 indent
38:68 error Missing trailing comma comma-dangle
39:1 error Expected indentation of 4 spaces but found 8 indent
39:10 error Missing semicolon semi
40:1 error Expected indentation of 2 spaces but found 4 indent
41:1 error Expected indentation of 2 spaces but found 4 indent
41:32 error Strings must use doublequote quotes
42:1 error Expected indentation of 4 spaces but found 8 indent
43:1 error Expected indentation of 6 spaces but found 12 indent
43:65 error Missing trailing comma comma-dangle
44:1 error Expected indentation of 4 spaces but found 8 indent
44:10 error Missing semicolon semi
45:1 error Expected indentation of 2 spaces but found 4 indent
46:1 error Expected indentation of 2 spaces but found 4 indent
47:1 error Expected indentation of 6 spaces but found 8 indent
48:1 error Expected indentation of 6 spaces but found 8 indent
49:1 error Expected indentation of 6 spaces but found 8 indent
49:27 error Missing semicolon semi
50:3 error Missing semicolon semi
in theory, based on this, is it possible to create an account registrar with the ability to interact with live users?
Have clone this app and set my firebase, I got this error after register
Uncaught Error in snapshot listener:, [FirebaseError: The query requires an index. That index is currently building and cannot be used yet. See its status here: https://console.firebase.google.com/v1/r/project/tiktok-48421/firestore/indexes?create_composite=ClRwcm9qZWN0cy90aWt0b2stNDg0MjEvZGF0YWJhc2VzLyhkZWZhdWx0KS9jb2xsZWN0aW9uR3JvdXBzL3Bvc3QvaW5kZXhlcy9DSUNBZ09qWGg0RUsQARoLCgdjcmVhdG9yEAEaDAoIY3JlYXRpb24QAhoMCghfX25hbWVfXxAC]
I am having this issue with the useChats hook. Any ideas on how to solve?
import firebase from "firebase/app" threw an error saying:
export 'default' (imported as 'firebase') was not found in 'firebase/app'
Solved by changing imports to:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.