├── src ├── redux │ ├── actions │ │ └── main │ │ │ ├── types.ts │ │ │ └── index.ts │ ├── reducers │ │ ├── index.ts │ │ └── main │ │ │ └── index.ts │ └── store │ │ └── index.ts ├── assets │ ├── image │ │ ├── doctor-female-plant.png │ │ ├── doctor-female-plant@2x.png │ │ └── doctor-female-plant@3x.png │ └── lottie_assets │ │ ├── close.json │ │ └── heartBeatLottie.json ├── screens │ ├── index.tsx │ ├── Search │ │ └── index.tsx │ └── Login │ │ ├── index.tsx │ │ └── socialLogin.tsx ├── App.tsx └── router │ └── index.tsx ├── assets ├── icon.png └── splash.png ├── Template-Sketch-file.sketch ├── App.tsx ├── babel.config.js ├── .prettierrc ├── .expo-shared └── assets.json ├── fluid-transition-exp.code-workspace ├── .gitignore ├── tsconfig.json ├── README.md ├── app.json └── package.json /src/redux/actions/main/types.ts: -------------------------------------------------------------------------------- 1 | export const GET_DATA = 'main/GET_DATA'; 2 | -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jojr/fluid-transition-svg/HEAD/assets/icon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jojr/fluid-transition-svg/HEAD/assets/splash.png -------------------------------------------------------------------------------- /Template-Sketch-file.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jojr/fluid-transition-svg/HEAD/Template-Sketch-file.sketch -------------------------------------------------------------------------------- /src/assets/image/doctor-female-plant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jojr/fluid-transition-svg/HEAD/src/assets/image/doctor-female-plant.png -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | import { registerRootComponent } from 'expo'; 2 | import MyRootComponent from './src/App'; 3 | 4 | registerRootComponent(MyRootComponent); -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /src/assets/image/doctor-female-plant@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jojr/fluid-transition-svg/HEAD/src/assets/image/doctor-female-plant@2x.png -------------------------------------------------------------------------------- /src/assets/image/doctor-female-plant@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jojr/fluid-transition-svg/HEAD/src/assets/image/doctor-female-plant@3x.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "tabWidth": 2, 4 | "singleQuote": true, 5 | "jsxBracketSameLine": true, 6 | "trailingComma": "es5" 7 | } -------------------------------------------------------------------------------- /src/screens/index.tsx: -------------------------------------------------------------------------------- 1 | export {default as Login} from './Login'; 2 | export {default as SocialLogin} from './Login/socialLogin'; 3 | export {default as Search} from './Search'; 4 | -------------------------------------------------------------------------------- /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /fluid-transition-exp.code-workspace: -------------------------------------------------------------------------------- 1 | { 2 | "folders": [ 3 | { 4 | "path": "." 5 | } 6 | ], 7 | "settings": { 8 | "typescript.tsdk": "node_modules/typescript/lib" 9 | } 10 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | web-report/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /src/redux/reducers/index.ts: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | 3 | import main from './main'; 4 | 5 | /*export default combineReducers({ 6 | main, 7 | });*/ 8 | 9 | export const rootReducer = combineReducers({ 10 | main, 11 | }); 12 | 13 | export type RootState = ReturnType; 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "jsx": "react-native", 5 | "lib": ["dom", "esnext"], 6 | "moduleResolution": "node", 7 | "noEmit": true, 8 | "skipLibCheck": true, 9 | "resolveJsonModule": true, 10 | "strict": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-navigation-fluid-transitions 2 | 3 | ![](https://i.postimg.cc/9Fj39BJr/medi-gif.gif) 4 | ### Check the Medium post: 5 | [https://medium.com/swlh/smooth-screen-transitions-on-react-native-svg-lottie-433467b752e3#2e2e-53e40129b975](https://medium.com/swlh/smooth-screen-transitions-on-react-native-svg-lottie-433467b752e3#2e2e-53e40129b975) 6 | -------------------------------------------------------------------------------- /src/redux/reducers/main/index.ts: -------------------------------------------------------------------------------- 1 | import * as types from '../../actions/main/types'; 2 | 3 | const initialState = { 4 | data: [ 5 | { 6 | //isLoaded: true, 7 | //isFake: true, 8 | }, 9 | ], 10 | }; 11 | 12 | export default (state = initialState, action: { type: any; payload: any }) => { 13 | switch (action.type) { 14 | case types.GET_DATA: { 15 | return { 16 | ...state, 17 | data: action.payload, 18 | }; 19 | } 20 | default: 21 | return state; 22 | } 23 | }; 24 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Provider } from 'react-redux'; 3 | import { PersistGate } from 'redux-persist/integration/react'; 4 | 5 | import { store, persistor } from './redux/store'; 6 | import RouterComponent from './router'; 7 | 8 | const App = () => { 9 | console.disableYellowBox = true; 10 | //persistor.purge(); 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "fluid-transition-exp", 4 | "slug": "fluid-transition-exp", 5 | "platforms": [ 6 | "ios", 7 | "android", 8 | "web" 9 | ], 10 | "version": "1.0.0", 11 | "orientation": "portrait", 12 | "icon": "./assets/icon.png", 13 | "splash": { 14 | "image": "./assets/splash.png", 15 | "resizeMode": "contain", 16 | "backgroundColor": "#ffffff" 17 | }, 18 | "updates": { 19 | "fallbackToCacheTimeout": 0 20 | }, 21 | "assetBundlePatterns": [ 22 | "**/*" 23 | ], 24 | "ios": { 25 | "supportsTablet": true 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/redux/actions/main/index.ts: -------------------------------------------------------------------------------- 1 | import * as types from './types'; 2 | 3 | const googlePlaceApikey = '***'; 4 | const options = { 5 | timeout: 10000, 6 | }; 7 | 8 | /* Fetch Google */ 9 | export const fetchGoogle = () => { 10 | return (dispatch) => { 11 | fetch(`https://maps.googleapis.com/maps/api/place/textsearch/json?language=pt-br&location=-25.4238294,-49.275898&radius=4000&query=cafe&pagetoken=&type=cafe&key=${googlePlaceApikey}`, options) 12 | .then((response) => response.json()) 13 | .then((responseJson) => { 14 | console.log(responseJson); 15 | dispatch({ type: types.GET_DATA, payload: { responseJson } }); 16 | }) 17 | .catch((error) => { 18 | console.error(error); 19 | }); 20 | }; 21 | }; -------------------------------------------------------------------------------- /src/router/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createAppContainer } from 'react-navigation'; 3 | import { FluidNavigator } from 'react-navigation-fluid-transitions'; 4 | import { Login, SocialLogin, Search } from '../screens'; 5 | 6 | const NavigatorFluid = FluidNavigator({ 7 | login: { screen: Login }, 8 | socialLogin: { screen: SocialLogin }, 9 | search: { screen: Search }, 10 | }, 11 | { 12 | //initialRouteName: 'search', 13 | style: { backgroundColor: 'transparent' }, 14 | navigationOptions: { 15 | gestureEnabled: false, 16 | cardStyle: { 17 | backgroundColor: 'transparent', 18 | }, 19 | }, 20 | } 21 | ); 22 | const RouterComponent = createAppContainer(NavigatorFluid); 23 | export default RouterComponent; 24 | -------------------------------------------------------------------------------- /src/redux/store/index.ts: -------------------------------------------------------------------------------- 1 | import { AsyncStorage } from 'react-native'; 2 | import { createStore, applyMiddleware, compose } from 'redux'; 3 | import logger from 'redux-logger'; 4 | import { persistStore, persistReducer } from 'redux-persist'; 5 | import thunk from 'redux-thunk'; //Dispatch after async done 6 | 7 | //import AsyncStorage from '@react-native-community/async-storage'; 8 | import { rootReducer } from '../reducers'; 9 | 10 | const persistConfig = { 11 | key: 'root', 12 | storage: AsyncStorage, 13 | whitelist: ['main'], // Reducers que serão persisitidos 14 | //blacklist: [], // Reducers que NÃO serão persisitidos 15 | }; 16 | const persistedReducer = persistReducer(persistConfig, rootReducer); 17 | const middleware = applyMiddleware(thunk, logger); 18 | const store = createStore(persistedReducer, compose(middleware)); 19 | const persistor = persistStore(store); 20 | 21 | export { store, persistor }; 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "./App.tsx", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "@react-native-community/masked-view": "0.1.6", 12 | "expo": "~37.0.3", 13 | "expo-linear-gradient": "~8.1.0", 14 | "lottie-react-native": "~2.6.1", 15 | "react": "~16.9.0", 16 | "react-dom": "~16.9.0", 17 | "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz", 18 | "react-native-gesture-handler": "~1.6.0", 19 | "react-native-reanimated": "~1.7.0", 20 | "react-native-safe-area-context": "0.7.3", 21 | "react-native-screens": "~2.2.0", 22 | "react-native-svg": "11.0.1", 23 | "react-native-web": "~0.11.7", 24 | "react-navigation": "^3.0.0", 25 | "react-navigation-fluid-transitions": "^0.3.2", 26 | "react-navigation-stack": "^1.0.6", 27 | "react-redux": "^7.2.0", 28 | "redux": "^4.0.5", 29 | "redux-logger": "^3.0.6", 30 | "redux-persist": "^6.0.0", 31 | "redux-thunk": "^2.3.0" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "^7.8.6", 35 | "@types/react": "~16.9.23", 36 | "@types/react-native": "~0.61.17", 37 | "@types/react-redux": "^7.1.9", 38 | "@types/redux-logger": "^3.0.8", 39 | "@typescript-eslint/eslint-plugin": "^3.0.2", 40 | "@typescript-eslint/parser": "^3.0.2", 41 | "babel-preset-expo": "~8.1.0", 42 | "eslint": "^7.1.0", 43 | "eslint-config-universe": "^3.0.1", 44 | "prettier": "^2.0.5", 45 | "typesafe-actions": "^5.1.0", 46 | "typescript": "~3.8.3" 47 | }, 48 | "eslintConfig": { 49 | "extends": "universe/native" 50 | }, 51 | "private": true 52 | } 53 | -------------------------------------------------------------------------------- /src/screens/Search/index.tsx: -------------------------------------------------------------------------------- 1 | import { LinearGradient as Gradient } from 'expo-linear-gradient'; 2 | import LottieView from 'lottie-react-native'; 3 | import React, { useState, useEffect } from 'react'; 4 | import { StyleSheet, Text, View, Dimensions, Image } from 'react-native'; 5 | import { TouchableOpacity } from 'react-native-gesture-handler'; 6 | import Svg, { Defs, LinearGradient, Stop, Path } from 'react-native-svg'; 7 | import { Transition } from 'react-navigation-fluid-transitions'; 8 | 9 | import { useSelector, useDispatch } from 'react-redux'; 10 | 11 | import { fetchGoogle } from '../../redux/actions/main'; 12 | import { RootState } from '../../redux/reducers'; 13 | 14 | interface User { 15 | props: any; 16 | state: RootState; 17 | main: string; 18 | } 19 | 20 | const { height, width } = Dimensions.get('window'); 21 | 22 | const Search: React.FC = (props) => { 23 | const dispatch = useDispatch(); // The older mapDispatchToProps 24 | const dataFromReducer = useSelector((state) => state.main); //The older mapStateToProps 25 | console.log(dataFromReducer); 26 | 27 | useEffect(() => { 28 | dispatch(fetchGoogle()); //The older componentDidMount 29 | }, []); 30 | 31 | return ( 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 47 | 48 | 49 | 50 | 51 | ); 52 | }; 53 | 54 | export default Search; 55 | 56 | const styles = StyleSheet.create({ 57 | container: { 58 | flex: 1, 59 | backgroundColor: '#fff', 60 | }, 61 | svgBackground: { 62 | position: 'absolute', 63 | top: -18, 64 | }, 65 | }); 66 | -------------------------------------------------------------------------------- /src/assets/lottie_assets/close.json: -------------------------------------------------------------------------------- 1 | {"v":"5.5.1","fr":50,"ip":38,"op":102,"w":40,"h":40,"nm":"预合成 2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"形状图层 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":38,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":45,"s":[-45]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":52,"s":[-34.968]},{"t":59,"s":[-45]}],"ix":10},"p":{"a":0,"k":[20.173,20,0],"ix":2},"a":{"a":0,"k":[-285.062,139.688,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[34,5],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":20,"ix":4},"nm":"矩形路径 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-285.174,139.702],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":38,"op":265,"st":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"形状图层 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":38,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":45,"s":[45]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":52,"s":[35]},{"t":59,"s":[45]}],"ix":10},"p":{"a":0,"k":[20.173,20,0],"ix":2},"a":{"a":0,"k":[-285.062,139.688,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[34,5],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":20,"ix":4},"nm":"矩形路径 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-285.174,139.702],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":38,"op":265,"st":1,"bm":0}],"markers":[]} -------------------------------------------------------------------------------- /src/assets/lottie_assets/heartBeatLottie.json: -------------------------------------------------------------------------------- 1 | {"v":"5.6.5","fr":29.9700012207031,"ip":0,"op":180.00000733155,"w":1000,"h":370,"nm":"heart-beat","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"heart-rate","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[500,232,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-0.75,1],[-2.5,-5.25],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[18.5,46],[-45,-3],[0,-13],[-44,-8.5],[53.594,-58.214],[11,-8.5],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-0.5,1.75],[-2,-4],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0.75,-1],[2.5,5.25],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-18.5,-46],[45,3],[8.5,-22.5],[44,8.5],[-29,31.5],[21.5,0.5],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0.5,-1.75],[2,4],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-493,-27],[-378,-27],[-369.5,-40.5],[-365.25,-38.5],[-358.75,-26.875],[-346.5,-26.875],[-337.625,-16],[-329.625,-28.75],[-308.25,-198],[-290,119.5],[-272,-54.5],[-258,-28.5],[-237.5,-28.5],[-230,-60],[-211.5,-28],[-186.5,-28],[-172,-41],[-158,-28.5],[-23,-28.5],[-99.5,-112.5],[-52,-197.5],[-1.5,-161],[64,-195.5],[74.5,-75.5],[20.5,-26],[86.5,-26],[115,-39.5],[126,-26],[151.5,-26],[156.5,-45.5],[169,-25.5],[213.5,-25.5],[231,-25.5],[233,-43],[249,-26.5],[257.5,-26],[264.625,-39],[269.375,-38.375],[276.625,-26.125],[289.125,-26],[297.25,-15.25],[305.5,-29.125],[325.75,-171.75],[344,98],[361.5,-52.5],[376,-28.5],[497.5,-27]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.5098039215686274,0.7019607843137254,0.9803921568627451,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.532],"y":[1]},"o":{"x":[0.283],"y":[0]},"t":60,"s":[0]},{"t":179.000007290819,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.375],"y":[1]},"o":{"x":[0.596],"y":[0]},"t":0,"s":[0]},{"t":120.0000048877,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":180.00000733155,"st":0,"bm":0}],"markers":[]} -------------------------------------------------------------------------------- /src/screens/Login/index.tsx: -------------------------------------------------------------------------------- 1 | import { LinearGradient as Gradient } from 'expo-linear-gradient'; 2 | import LottieView from 'lottie-react-native'; 3 | import React, { useState } from 'react'; 4 | import { StyleSheet, Text, View, Dimensions, Image } from 'react-native'; 5 | import { TouchableOpacity } from 'react-native-gesture-handler'; 6 | import Svg, { Defs, LinearGradient, Stop, Path } from 'react-native-svg'; 7 | import { Transition } from 'react-navigation-fluid-transitions'; 8 | 9 | interface User { 10 | name: string; 11 | login: string; 12 | props: any; 13 | } 14 | 15 | const { height, width } = Dimensions.get('window'); 16 | const App: React.FC = (props) => { 17 | const [users, setUsers] = useState(); 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 34 | 35 | 36 | 37 | 38 | 42 | 43 | 44 | 45 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | Love 57 | .MD 58 | 59 | The chain of love to health 60 | 61 | 62 | 63 | 64 | Book a FREE consultation today 65 | 66 | 71 | Get consultation 72 | 73 | 74 | 75 | All telemedicine consultations are donated by doctors who love people. 76 | 77 | 78 | props.navigation.navigate('socialLogin')} 80 | activeOpacity={0.7} 81 | style={[styles.doctorButton, { flexDirection: 'row', marginTop: 10 }]}> 82 | I'm doctor 83 | 84 | 89 | 90 | 91 | 92 | Only 15 minutes a week can make the world a better place :) 93 | 94 | 95 | 96 | 97 | 98 | ); 99 | } 100 | 101 | export default App; 102 | 103 | const styles = StyleSheet.create({ 104 | container: { 105 | flex: 1, 106 | backgroundColor: '#fff', 107 | }, 108 | svgBackground: { 109 | position: 'absolute', 110 | top: -18, 111 | }, 112 | heartBeat: { 113 | position: 'absolute', 114 | top: 200, 115 | left: 0, 116 | width: 250, 117 | height: 100, 118 | //backgroundColor: 'transparent', 119 | //backgroundColor: '#FF00FF20', 120 | }, 121 | logo: { 122 | position: 'absolute', 123 | top: 115, 124 | left: 40, 125 | width: (width / 100) * 60, 126 | height: (width / 100) * 30, 127 | }, 128 | logoTextBig: { 129 | fontSize: 62, 130 | fontWeight: '800', 131 | color: '#FFFFFF', 132 | letterSpacing: -4, 133 | }, 134 | logoTextThin: { 135 | fontSize: 33, 136 | fontWeight: '300', 137 | color: '#FFFFFF', 138 | letterSpacing: -2, 139 | paddingTop: 20, 140 | }, 141 | logoSlogan: { 142 | fontSize: 16, 143 | fontWeight: '300', 144 | color: '#FFFFFF', 145 | letterSpacing: -0.3, 146 | paddingTop: 0, 147 | }, 148 | doctorImage: { 149 | position: 'absolute', 150 | //backgroundColor: '#FF00FF20', 151 | top: 115, 152 | right: 0, 153 | width: (width / 100) * 45, 154 | height: (width / 100) * 65, 155 | }, 156 | ctaWrapper: { 157 | margin: 20, 158 | marginTop: (height / 100) * 47, 159 | justifyContent: 'center', 160 | alignItems: 'center', 161 | //backgroundColor: '#0000FF10' 162 | }, 163 | ctaMessage: { 164 | fontSize: 30, 165 | fontWeight: '800', 166 | color: '#636363', 167 | letterSpacing: -1, 168 | textAlign: 'center', 169 | lineHeight: 36, 170 | }, 171 | ctaButtonWrapper: { 172 | shadowColor: '#7E88C4', 173 | shadowOffset: { 174 | width: 0, 175 | height: 8, 176 | }, 177 | shadowOpacity: 0.44, 178 | shadowRadius: 10.32, 179 | 180 | elevation: 16, 181 | }, 182 | ctaButton: { 183 | width: (width / 100) * 90, 184 | height: 68, 185 | margin: 20, 186 | borderRadius: 30, 187 | alignItems: 'center', 188 | justifyContent: 'center', 189 | }, 190 | ctaButtonText: { 191 | fontSize: 22, 192 | color: '#fff', 193 | }, 194 | ctaDisclaimer: { 195 | fontSize: 14, 196 | fontWeight: '300', 197 | color: '#3186FF', 198 | letterSpacing: 0, 199 | textAlign: 'center', 200 | lineHeight: 18, 201 | }, 202 | divisor: { 203 | width, 204 | height: 1, 205 | backgroundColor: '#F1EEEE', 206 | marginTop: 30, 207 | marginBottom: 30, 208 | }, 209 | doctorButton: { 210 | width: (width / 100) * 90, 211 | height: 56, 212 | margin: 20, 213 | borderRadius: 30, 214 | borderWidth: 1, 215 | borderColor: '#3186FF', 216 | backgroundColor: '#FFFFFF', 217 | alignItems: 'center', 218 | justifyContent: 'center', 219 | shadowColor: '#7E88C4', 220 | shadowOffset: { 221 | width: 0, 222 | height: 8, 223 | }, 224 | shadowOpacity: 0.44, 225 | shadowRadius: 10.32, 226 | elevation: 16, 227 | }, 228 | doctorButtonText: { 229 | fontSize: 22, 230 | color: '#3186FF', 231 | }, 232 | }); 233 | -------------------------------------------------------------------------------- /src/screens/Login/socialLogin.tsx: -------------------------------------------------------------------------------- 1 | import { LinearGradient as Gradient } from 'expo-linear-gradient'; 2 | import LottieView from 'lottie-react-native'; 3 | import React, { useState, useEffect } from 'react'; 4 | import { StyleSheet, Text, View, Dimensions, Image, Animated, TextInput } from 'react-native'; 5 | import { TouchableOpacity } from 'react-native-gesture-handler'; 6 | import Svg, { Defs, LinearGradient, Stop, Path } from 'react-native-svg'; 7 | import { Transition } from 'react-navigation-fluid-transitions'; 8 | import { Ionicons } from '@expo/vector-icons'; 9 | 10 | interface User { 11 | props: any; 12 | doAnimation: number; 13 | setDoAnimation: number; 14 | password: string; 15 | email: string; 16 | } 17 | const { height, width } = Dimensions.get('window'); 18 | 19 | 20 | 21 | const App: React.FC = (props) => { 22 | const [doAnimation, setDoAnimation] = useState(); 23 | const [email, setEmail] = useState(''); 24 | const [password, setPassword] = useState(''); 25 | const [animation, isEditing] = useState(new Animated.Value(0)); 26 | 27 | const AnimatedImage = ( doAnimation ) => { 28 | return ( 29 | 57 | ); 58 | }; 59 | 60 | /*useEffect(() => { 61 | Animated.timing(animation, { 62 | //toValue: 1, 63 | toValue: isEditing ? 1 : 0, 64 | duration: 500, 65 | useNativeDriver: true, 66 | }).start(); 67 | }, [doAnimation]);*/ 68 | 69 | return ( 70 | 71 | 72 | 73 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 92 | 93 | 94 | 95 | 96 | 100 | 101 | 102 | props.navigation.goBack()} 104 | hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }} 105 | style={styles.closeButton}> 106 | 107 | 108 | 109 | 110 | 111 | 112 | Together 113 | 114 | We can heal the world! 115 | 116 | 117 | 118 | {/* Body */} 119 | 120 | 121 | Welcome hero, 122 | Sign in to continue 123 | 124 | 125 | setEmail(e)} 133 | textContentType="emailAddress" 134 | keyboardType="email-address" 135 | autoCorrect={false} 136 | autoCapitalize="none" 137 | returnKeyLabel="next" 138 | returnKeyType="next" 139 | /> 140 | 141 | 142 | setPassword(e)} 150 | textContentType="newPassword" 151 | keyboardType="visible-password" 152 | autoCorrect={false} 153 | autoCapitalize="none" 154 | returnKeyLabel="next" 155 | returnKeyType="next" 156 | /> 157 | 158 | 159 | 160 | 165 | Login 166 | 167 | 168 | 169 | 170 | 171 | ); 172 | } 173 | 174 | export default App; 175 | 176 | const styles = StyleSheet.create({ 177 | doctorImage: { 178 | position: 'absolute', 179 | left: -30, 180 | top: 30, 181 | width: (width / 100) * 45, 182 | height: (width / 100) * 65, 183 | transform: [ 184 | { 185 | translateX: 20, 186 | }, 187 | { 188 | translateY: -20, 189 | }, 190 | { 191 | scale: 0.5, 192 | }, 193 | ], 194 | }, 195 | closeButton: { 196 | position: 'absolute', 197 | top: 40, 198 | left: 15, 199 | width: 40, 200 | height: 40, 201 | //backgroundColor: '#FF00FF20', 202 | }, 203 | container: { 204 | flex: 1, 205 | backgroundColor: '#fff', 206 | }, 207 | svgBackground: { 208 | position: 'absolute', 209 | top: -150, 210 | }, 211 | logo: { 212 | position: 'absolute', 213 | top: 60, 214 | right: 0, 215 | width: (width / 100) * 65, 216 | height: (width / 100) * 30, 217 | //backgroundColor: '#FF00FF20', 218 | }, 219 | logoTextBig: { 220 | fontSize: 56, 221 | fontWeight: '600', 222 | color: '#FFFFFF', 223 | letterSpacing: -4, 224 | }, 225 | logoTextThin: { 226 | fontSize: 33, 227 | fontWeight: '300', 228 | color: '#FFFFFF', 229 | letterSpacing: -2, 230 | paddingTop: 20, 231 | }, 232 | logoSlogan: { 233 | fontSize: 20, 234 | fontWeight: '200', 235 | color: '#FFFFFF', 236 | letterSpacing: -0.3, 237 | paddingTop: 0, 238 | paddingLeft: 10, 239 | }, 240 | ctaWrapper: { 241 | margin: 20, 242 | marginTop: (height / 100) * 28, 243 | }, 244 | ctaMessage: { 245 | fontSize: 30, 246 | fontWeight: '600', 247 | color: '#21232A', 248 | letterSpacing: -1, 249 | lineHeight: 35, 250 | }, 251 | ctaMessageAction: { 252 | fontSize: 24, 253 | fontWeight: '500', 254 | color: '#B1B9C0', 255 | letterSpacing: -1, 256 | lineHeight: 30, 257 | }, 258 | textInputWrapper: { 259 | width: '100%', 260 | height: 68, 261 | marginTop: 20, 262 | borderRadius: 30, 263 | borderWidth: 1, 264 | borderColor: '#C2C2C2', 265 | }, 266 | textInput: { 267 | fontSize: 20, 268 | fontWeight: '600', 269 | color: '#21232A', 270 | width: '100%', 271 | height: 68, 272 | paddingLeft: 20, 273 | paddingRight: 20, 274 | }, 275 | ctaButtonWrapper: { 276 | shadowColor: '#B1B9C0', 277 | shadowOffset: { 278 | width: 0, 279 | height: 8, 280 | }, 281 | shadowOpacity: 0.44, 282 | shadowRadius: 10.32, 283 | 284 | elevation: 16, 285 | }, 286 | ctaButton: { 287 | width: '100%', 288 | height: 68, 289 | marginTop: 20, 290 | borderRadius: 30, 291 | alignItems: 'center', 292 | justifyContent: 'center', 293 | }, 294 | ctaButtonText: { 295 | fontSize: 22, 296 | color: '#fff', 297 | }, 298 | ctaDisclaimer: { 299 | fontSize: 14, 300 | fontWeight: '300', 301 | color: '#3186FF', 302 | letterSpacing: 0, 303 | textAlign: 'center', 304 | lineHeight: 18, 305 | }, 306 | divisor: { 307 | width: '100%', 308 | height: 1, 309 | backgroundColor: '#F1EEEE', 310 | marginTop: 30, 311 | marginBottom: 30, 312 | }, 313 | doctorButton: { 314 | width: (width / 100) * 90, 315 | height: 56, 316 | margin: 20, 317 | borderRadius: 30, 318 | borderWidth: 1, 319 | borderColor: '#3186FF', 320 | backgroundColor: '#FFFFFF', 321 | alignItems: 'center', 322 | justifyContent: 'center', 323 | shadowColor: '#7E88C4', 324 | shadowOffset: { 325 | width: 0, 326 | height: 8, 327 | }, 328 | shadowOpacity: 0.44, 329 | shadowRadius: 10.32, 330 | elevation: 16, 331 | }, 332 | doctorButtonText: { 333 | fontSize: 22, 334 | color: '#3186FF', 335 | }, 336 | }); 337 | --------------------------------------------------------------------------------