Skip to content

Instantly share code, notes, and snippets.

View YajanaRao's full-sized avatar
🎯
Focusing

Yajana N Rao YajanaRao

🎯
Focusing
View GitHub Profile
@YajanaRao
YajanaRao / App.js
Created September 5, 2021 16:52
App.js for react navigation sticky header
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { useTheme } from "react-native-paper";
import { Provider as PaperProvider } from "react-native-paper";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import SearchScreen from "./Search";
const Stack = createNativeStackNavigator();
const App = () => {
@YajanaRao
YajanaRao / SearchScreen.tsx
Created September 5, 2021 09:50
Sticky Header Animation in Search Screen
import React, { useRef } from 'react';
import {
StyleSheet,
TouchableOpacity,
Animated,
Pressable,
View,
Image,
} from 'react-native';
import {
@YajanaRao
YajanaRao / AssetExample.js
Created August 22, 2021 09:47
An Asset example for responsive components using restyle
import * as React from 'react';
import { Image, StyleSheet } from 'react-native';
import Box from './Box';
import Text from './Text';
import Button from './Button';
export default function AssetExample() {
return (
<Box
alignItems="center"
@YajanaRao
YajanaRao / App.js
Last active August 22, 2021 10:46
Import ThemeProvider at the top of your React component tree
import * as React from 'react';
import Constants from 'expo-constants';
import { ThemeProvider } from '@shopify/restyle';
// You can import from local files
import theme from './theme';
import AssetExample from './components/AssetExample';
import Box from './components/Box';
import Text from './components/Text';
@YajanaRao
YajanaRao / theme.js
Created August 22, 2021 09:33
Restyle theme object example
import { createTheme } from '@shopify/restyle'
const palette = {
greenLight: '#56DCBA',
greenPrimary: '#0ECD9D',
gray: '#F0F2F3',
black: '#0B0B0B',
white: '#FFFFFF',
};
@YajanaRao
YajanaRao / store.js
Created August 15, 2021 06:06
redux flipper configuration for redux toolkit
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import { RootReducer } from '../reducers';
const middlewares = getDefaultMiddleware({
// https://github.com/reduxjs/redux-toolkit/issues/415
immutableCheck: false,
});
if (__DEV__) {
const createDebugger = require("redux-flipper").default;
@YajanaRao
YajanaRao / store.js
Created August 15, 2021 06:03
Redux Flipper configuration for react native flipper
import { createStore, applyMiddleware } from "redux";
const middlewares = [
/* other middlewares */
];
if (__DEV__) {
const createDebugger = require("redux-flipper").default;
middlewares.push(createDebugger());
}
@YajanaRao
YajanaRao / wdyr.js
Created August 5, 2021 18:17
React Native Why Did You Render
import React from 'react';
if (process.env.NODE_ENV === 'development') {
const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React, {
trackAllPureComponents: true,
});
}
@YajanaRao
YajanaRao / quotes.json
Last active August 2, 2021 17:08
Quotes
[
{
"quote": "My impact in the world does not come from my knowledge but from my presence.",
"author": "Sadhguru"
},
{
"quote": "Pleasure is only a false image of joy. It is beautiful, but it is just a reflection.",
"author": "Sadhguru"
},
{
@YajanaRao
YajanaRao / App.js
Created July 18, 2021 10:30
Persist navigation state in react navigation 5
import * as React from 'react';
import { Linking, Platform, ActivityIndicator } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { NavigationContainer } from '@react-navigation/native';
const PERSISTENCE_KEY = 'NAVIGATION_STATE';
import { AppNavigation } from './navigation/AppNavigation';
export default function App() {