`
8 |
9 | ---
10 |
11 | ## Example
12 |
13 | `View`s are primarily used for styling and layout of children elements.
Let's look at a few of the styles we can apply to views. The example below contains two `View`s: the outer view which specifies the alignment of the content contained within, and the inner view which draws a blue square.
14 |
15 |
16 |
--------------------------------------------------------------------------------
/examples/files/app/Input.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { StyleSheet, TextInput } from 'react-native'
3 |
4 | export default function Input({ placeholder, onSubmitEditing }) {
5 | const [text, setText] = useState('')
6 |
7 | return (
8 |
setText(value)}
13 | onSubmitEditing={() => {
14 | if (!text) return // Don't submit if empty
15 |
16 | onSubmitEditing(text)
17 | setText('')
18 | }}
19 | />
20 | )
21 | }
22 |
23 | const styles = StyleSheet.create({
24 | input: {
25 | padding: 15,
26 | height: 50,
27 | },
28 | })
29 |
--------------------------------------------------------------------------------
/pages/javascript/features/classes.mdx:
--------------------------------------------------------------------------------
1 | import constructor from '../../../examples/files/javascript/constructor.js'
2 |
3 | JavaScript supports object-oriented programming with classes. JavaScript classes support single inheritance, private properties/methods, and static (i.e. class) properties/methods. Classes don't support interfaces (i.e. protocols or type classes), so they may feel somewhat limited compared to other languages.
4 |
5 | > TypeScript supports `interface` type declarations, but not default implementations.
6 |
7 | > Many developers prefer programming without classes, instead using functional patterns and storing data in plain JavaScript objects.
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/files/app/useAsyncStorage.js:
--------------------------------------------------------------------------------
1 | export default function useItem(key) {
2 | const [item, setItem] = useState(defaultValue)
3 |
4 | async function getValue() {
5 | try {
6 | const newItem = await AsyncStorage.getItem(key)
7 | if (newItem !== item) {
8 | setItem(newItem)
9 | }
10 | } catch (e) {}
11 | }
12 |
13 | async function setItem(newItem) {
14 | try {
15 | if (newItem === null) {
16 | await AsyncStorage.removeItem(key)
17 | } else {
18 | await AsyncStorage.setItem(key, newItem)
19 | setItem(newItem)
20 | }
21 | } catch (e) {}
22 | }
23 |
24 | useEffect(() => {
25 | getValue()
26 | }, [item])
27 |
28 | return [item, setItem]
29 | }
30 |
--------------------------------------------------------------------------------
/pages/javascript/features/async_and_await.mdx:
--------------------------------------------------------------------------------
1 | import asyncAwait from '../../../examples/files/javascript/fetch.js'
2 |
3 | The keywords `async` and `await` are special syntax for working with promises.
4 |
5 | A function marked as `async` _always_ returns a `Promise` — if we return a non-promise value, it's automatically wrapped in `Promise.resolve`.
6 |
7 | Within the function, we can use `await` to wait for a promise to be resolved or rejected and access its value.
8 |
9 | > The main advantage of this syntax is that we don't introduce deeply nested callback chains. However, all the complexity of asynchronous programming is still here, even if the syntax looks nicer.
10 |
11 |
12 |
--------------------------------------------------------------------------------
/examples/files/exercises/PhotoGallery1.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useReducer, useCallback } from 'react'
2 | import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
3 |
4 | import { getList } from './api/picsum'
5 | import { actionCreators, initialState, reducer } from './reducers/photos'
6 | import PhotoGrid from './components/PhotoGrid'
7 |
8 | export default function App() {
9 | return (
10 |
11 | Open up App.js to start working on your app!
12 |
13 | )
14 | }
15 |
16 | const styles = StyleSheet.create({
17 | container: {
18 | flex: 1,
19 | backgroundColor: '#fff',
20 | alignItems: 'center',
21 | justifyContent: 'center',
22 | },
23 | })
24 |
--------------------------------------------------------------------------------
/pages/core_components.mdx:
--------------------------------------------------------------------------------
1 | ## Batteries included
2 |
3 | React Native includes a few dozen components which can be used out-of-the-box. More complex components can be built by combining the core components in interesting ways.
4 |
5 | Nearly all the core components extend the `View` component, and can be passed an optional `style` prop. The style can include visual properties like colors and borders, as well as layout properties. Components use the flexbox algorithm to specify the layout of their children.
6 |
7 | Let's now take a look at the flexbox algorithm and some of the most common core components. If you want to dive deeper, I cover these topics in great detail in the "Core Components" chapter of my [book](https://www.fullstackreact.com/react-native/).
8 |
--------------------------------------------------------------------------------
/pages/react/hooks/custom_hooks.mdx:
--------------------------------------------------------------------------------
1 | import useInterval from '../../../examples/files/hooks/useInterval.js'
2 |
3 | We can compose built-in hooks to create new ones. We should still use the `use` prefix for our function name.
4 |
5 | > We'll see another example of a custom hook when building a drag gesture with [PanResponder](/app/gestures/pan_responder).
6 |
7 | ## Example
8 |
9 | Here we make a `useInterval` hook for running a function on a regular interval. It can be deceptively difficult to implement correctly - we should be able to change the delay and callback function at any point.
10 |
11 | > Example custom hook from: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
12 |
13 |
14 |
--------------------------------------------------------------------------------
/examples/files/core_components/button.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { Button, StyleSheet, Text, View } from 'react-native'
3 |
4 | export default function App() {
5 | const [count, setCount] = useState(0)
6 |
7 | return (
8 |
9 |
17 | )
18 | }
19 |
20 | const styles = StyleSheet.create({
21 | container: {
22 | flex: 1,
23 | alignItems: 'center',
24 | justifyContent: 'center',
25 | },
26 | text: {
27 | fontSize: 18,
28 | padding: 12,
29 | },
30 | })
31 |
--------------------------------------------------------------------------------
/examples/files/hooks/useRef.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from 'react'
2 | import { View, Text, Button } from 'react-native'
3 |
4 | export default function App() {
5 | const intervalRef = useRef()
6 | const [count, setCount] = useState(0)
7 |
8 | useEffect(() => {
9 | intervalRef.current = setInterval(
10 | () => setCount((count) => count + 1),
11 | 1000
12 | )
13 |
14 | return () => {
15 | clearInterval(intervalRef.current)
16 | }
17 | }, [])
18 |
19 | return (
20 |
21 | {count}
22 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/examples/files/app/TodoListWithReducer.js:
--------------------------------------------------------------------------------
1 | import React, { useReducer } from 'react'
2 | import { View } from 'react-native'
3 |
4 | import List from './List'
5 | import Input from './Input'
6 | import Title from './Title'
7 | import { actionCreators, reducer, initialState } from './todos'
8 |
9 | export default function App() {
10 | const [state, dispatch] = useReducer(reducer, initialState)
11 |
12 | return (
13 |
14 | To-Do List
15 | dispatch(actionCreators.add(title))}
18 | />
19 | dispatch(actionCreators.remove(id))}
22 | />
23 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/examples/files/app/posts.js:
--------------------------------------------------------------------------------
1 | const types = {
2 | LOADING: 'LOADING',
3 | SUCCESS: 'SUCCESS',
4 | FAILURE: 'FAILURE',
5 | }
6 |
7 | export const actionCreators = {
8 | loading: () => ({ type: types.LOADING }),
9 | failure: () => ({ type: types.FAILURE }),
10 | success: (payload) => ({ type: types.SUCCESS, payload }),
11 | }
12 |
13 | export const initialState = {
14 | loading: true,
15 | error: false,
16 | posts: [],
17 | }
18 |
19 | export function reducer(state, action) {
20 | switch (action.type) {
21 | case types.LOADING:
22 | return { ...state, loading: true, error: false }
23 | case types.SUCCESS:
24 | return { loading: false, error: false, posts: action.payload }
25 | case types.FAILURE:
26 | return { ...state, loading: false, error: true }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/examples/files/exercises/PhotoGrid.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dimensions, FlatList, Image } from 'react-native'
3 |
4 | import { formatPhotoUri } from '../api/picsum'
5 |
6 | export default function PhotoGrid({ photos, numColumns, onEndReached }) {
7 | const { width } = Dimensions.get('window')
8 |
9 | const size = width / numColumns
10 |
11 | return (
12 | item.id}
15 | numColumns={numColumns}
16 | onEndReached={onEndReached}
17 | renderItem={({ item }) => (
18 |
25 | )}
26 | />
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/pages/react.mdx:
--------------------------------------------------------------------------------
1 | In this section, we'll cover **React**, which serves as a foundation for React Native. If you're already familiar with React and want to get started with React Native, skip ahead to the next section, [Core Components](/core_components).
2 |
3 | ## How React works
4 |
5 | The React library lets us define the entire UI of our app as a tree of JavaScript objects. These JavaScript objects are called **React elements**. React provides the utilities for creating and manipulating this tree.
6 |
7 | We then leverage a library with platform-specific bindings, e.g. **React Native** for the mobile apps, to **render** our tree of React elements on the screen using native UI elements. Whenever the tree of elements changes, React Native updates the native UI elements to match.
8 |
--------------------------------------------------------------------------------
/examples/files/core_components/flatlist.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FlatList, StyleSheet, Text } from 'react-native'
3 |
4 | const items = [
5 | { id: '0', text: 'View' },
6 | { id: '1', text: 'Text' },
7 | { id: '2', text: 'Image' },
8 | { id: '3', text: 'ScrollView' },
9 | { id: '4', text: 'ListView' },
10 | ]
11 |
12 | export default function App() {
13 | return (
14 | {item.text}}
18 | keyExtractor={(item) => item.id}
19 | />
20 | )
21 | }
22 |
23 | const styles = StyleSheet.create({
24 | container: {
25 | flex: 1,
26 | },
27 | row: {
28 | padding: 15,
29 | marginBottom: 5,
30 | backgroundColor: 'skyblue',
31 | },
32 | })
33 |
--------------------------------------------------------------------------------
/examples/files/react/complexRendering.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { View, Text } from 'react-native'
3 |
4 | const Card = ({ loading, error, title }) => {
5 | let content
6 |
7 | if (error) {
8 | content = Error
9 | } else if (loading) {
10 | content = Loading...
11 | } else {
12 | content = (
13 |
14 | {title}
15 |
16 | )
17 | }
18 |
19 | return {content}
20 | }
21 |
22 | export default function App() {
23 | return (
24 |
25 |
26 |
27 |
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/pages/react/user_input.mdx:
--------------------------------------------------------------------------------
1 | import userInput from '../../examples/files/react/userInput.js'
2 |
3 | In React, most input components are stateless. An input component typically has a `value` prop and a prop prefixed with `onChange`, and together these things give us complete control over the input without ever having to access the native UI imperatively.
4 |
5 | ---
6 |
7 | ## Input field
8 |
9 | Here's an example of a text input field.
10 |
11 | We introduce a **state variable**, `text`, to store the current value of the input field. We pass `text` into the `TextInput` as the `value` prop, and any time `onChangeText` is called, we update call `setText` to update our state variable.
12 |
13 | > We use the [useState](/react/hooks/usestate) hook to store the text value. We'll cover this soon.
14 |
15 |
16 |
--------------------------------------------------------------------------------
/examples/files/hooks/useInterval.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from 'react'
2 | import { Text } from 'react-native'
3 |
4 | function useInterval(callback, delay) {
5 | const savedCallback = useRef()
6 |
7 | // Remember the latest callback.
8 | useEffect(() => {
9 | savedCallback.current = callback
10 | }, [callback])
11 |
12 | // Set up the interval.
13 | useEffect(() => {
14 | if (delay !== null) {
15 | let id = setInterval(() => {
16 | savedCallback.current()
17 | }, delay)
18 | return () => clearInterval(id)
19 | }
20 | }, [delay])
21 | }
22 |
23 | export default function App() {
24 | const [count, setCount] = useState(0)
25 |
26 | useInterval(() => {
27 | setCount(count + 1)
28 | }, 1000)
29 |
30 | return {count}
31 | }
32 |
--------------------------------------------------------------------------------
/pages/app/animation/reanimated.mdx:
--------------------------------------------------------------------------------
1 | For animations that need to be particularly high performance, you may want to consider [`react-native-reanimated`](https://github.com/software-mansion/react-native-reanimated).
2 |
3 | The library runs separate JavaScript contexts (which are sort of like threads/web workers) for animation. This approach allows a lot of flexibility in terms of the animation code you can write, while not blocking the main UI thread. However, it requires you to write your code in a special way, so only turn to this if you find an animation written with `Animated` is sluggish.
4 |
5 | > The main goal here is to reduce the number of round trips between JavaScript and native code. The library's implementation changed from v1 to v2, but the goal is still the same).
6 |
7 | To learn more: https://blog.swmansion.com/introducing-reanimated-2-752b913af8b3
8 |
--------------------------------------------------------------------------------
/pages/javascript/features.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: New Features
3 | ---
4 |
5 | The JavaScript language is updated yearly with new features. If you haven't used JavaScript in a while, you'll likely see some unfamiliar syntax in React Native code.
6 |
7 | > If you're brand new to JavaScript, I wrote a separate intro-to-JavaScript guide, which you may want to check out before diving into React Native: [JavaScript Express](https://www.javascript.express). It also covers TypeScript. It's still a work-in-progress, but it covers quite a bit already.
8 |
9 | ## Language highlights
10 |
11 | In this section, we'll cover a handful of interesting features from recent years which are common in React Native apps:
12 |
13 | - Imports and exports
14 | - Block-scoped declarations
15 | - Arrow functions
16 | - Classes
17 | - Destructuring
18 | - Spread
19 | - Async/await
20 |
--------------------------------------------------------------------------------
/pages/javascript/features/variables.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Block-scoped Declarations
3 | ---
4 |
5 | import variables from '../../../examples/files/javascript/variables.js'
6 | import constants from '../../../examples/files/javascript/constants.js'
7 |
8 | # `let` and `const`
9 |
10 | We declare variables with `let` and constants with `const`.
11 |
12 | > Avoid variable declarations with `var` unless maintaining legacy code
13 |
14 |
19 |
20 | ---
21 |
22 | ## Constants with mutable values
23 |
24 | With `const`, a _name_ is permanently bound to a value in scope and can't be reassigned.
25 |
26 | However, if the _value_ is an object, then the value is still mutable.
27 |
28 |
29 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Native Express
2 |
3 | The all-in-one guide to React Native: https://www.reactnative.express
4 |
5 | ## Translations
6 |
7 | - `zh-CN` by [@cnscorpions](https://github.com/cnscorpions): https://github.com/cnscorpions/react-native-express-cn
8 |
9 | > If you'd like to help translate, for now, please fork the repo and I'll list it here.
10 |
11 | ## Installation
12 |
13 | ```bash
14 | yarn
15 | ```
16 |
17 | ## Running Dev Server
18 |
19 | ```bash
20 | yarn dev
21 | ```
22 |
23 | ## Building and Running Production Server
24 |
25 | ```bash
26 | yarn build
27 | yarn start
28 | ```
29 |
30 | ## Contributing
31 |
32 | Contributions are welcome! (It might take me some time to get around to reviewing however)
33 |
34 | ## License
35 |
36 | MIT, Copyright (c) 2020 Devin Abbott
37 |
38 | ## Author
39 |
40 | Devin Abbott, [@dvnabbott](http://twitter.com/dvnabbott)
41 |
--------------------------------------------------------------------------------
/examples/files/gestures/panGestureHandler.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import { Animated } from 'react-native'
3 | import { PanGestureHandler, State } from 'react-native-gesture-handler'
4 |
5 | export default function MyComponent() {
6 | const translationY = useRef(new Animated.Value(0))
7 |
8 | const event = useRef(
9 | Animated.event([{ nativeEvent: { translationY: translationY.current } }], {
10 | useNativeDriver: true,
11 | })
12 | )
13 |
14 | return (
15 | {
18 | if (event.nativeEvent.state === State.ACTIVE) {
19 | // Do something
20 | }
21 | }}
22 | >
23 |
26 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/examples/files/react/styledComponents.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { render } from 'react-dom'
3 | import styled from 'styled-components'
4 |
5 | const randomColor = () => '#' + Math.random().toString(16).substr(-6)
6 |
7 | const Card = styled.div`
8 | padding: 20px;
9 | text-align: center;
10 | color: white;
11 | background-color: ${(props) => props.color};
12 | `
13 |
14 | const Container = styled.div`
15 | padding: 20px;
16 | `
17 |
18 | const App = () => {
19 | const [color, setColor] = useState('skyblue')
20 |
21 | return (
22 |
23 |
24 | setColor(randomColor())}
28 | />
29 |
30 |
31 | )
32 | }
33 |
34 | render(, document.querySelector('#app'))
35 |
--------------------------------------------------------------------------------
/examples/files/app/List.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FlatList, StyleSheet, Text, TouchableOpacity } from 'react-native'
3 |
4 | export default function List({ items, onPressItem }) {
5 | return (
6 | item.id}
9 | renderItem={({ item, index }) => (
10 | onPressItem(item.id)}
13 | >
14 | {item.title}
15 |
16 | )}
17 | />
18 | )
19 | }
20 |
21 | function itemColor(index) {
22 | return `rgba(59, 108, 212, ${Math.max(1 - index / 10, 0.4)})`
23 | }
24 |
25 | const styles = StyleSheet.create({
26 | item: {
27 | marginBottom: 1,
28 | padding: 15,
29 | },
30 | title: {
31 | color: 'white',
32 | },
33 | })
34 |
--------------------------------------------------------------------------------
/utils/search.js:
--------------------------------------------------------------------------------
1 | import * as Guidebook from 'react-guidebook'
2 |
3 | /* TODO: Only import for a specific locale */
4 | import guidebook from '../guidebook-en'
5 |
6 | let searchDocuments = []
7 | let searchIndexPromise = undefined
8 |
9 | export const searchPages = (query) => {
10 | if (!searchIndexPromise) {
11 | searchIndexPromise = Promise.all([
12 | import('../searchIndex'),
13 | import('flexsearch'),
14 | ]).then(([{ indexData, documents }, { default: FlexSearch }]) => {
15 | searchDocuments = documents
16 | const search = new FlexSearch()
17 | search.import(indexData)
18 | return search
19 | })
20 | }
21 |
22 | return searchIndexPromise.then((searchIndex) =>
23 | Guidebook.searchPages(guidebook, searchIndex, searchDocuments, query)
24 | )
25 | }
26 |
27 | export const searchTextMatch = (id, query) =>
28 | Guidebook.searchTextMatch(guidebook, searchDocuments, id, query)
29 |
--------------------------------------------------------------------------------
/examples/files/app/todos.js:
--------------------------------------------------------------------------------
1 | const randomId = () => Math.random().toString()
2 |
3 | const createItem = (title) => ({ id: randomId(), title })
4 |
5 | const types = {
6 | ADD: 'ADD',
7 | REMOVE: 'REMOVE',
8 | }
9 |
10 | export const actionCreators = {
11 | add: (title) => ({ type: types.ADD, payload: createItem(title) }),
12 | remove: (id) => ({ type: types.REMOVE, payload: id }),
13 | }
14 |
15 | export const initialState = {
16 | items: [
17 | createItem('Click to remove'),
18 | createItem('Learn React Native'),
19 | createItem('Write Code'),
20 | createItem('Ship App'),
21 | ],
22 | }
23 |
24 | export function reducer(state, action) {
25 | switch (action.type) {
26 | case types.ADD:
27 | return { ...state, items: [...state.items, action.payload] }
28 | case types.REMOVE:
29 | return {
30 | ...state,
31 | items: state.items.filter((item) => item.id !== action.payload),
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/examples/files/react/inlineStyles.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { render } from 'react-dom'
3 |
4 | const randomColor = () => '#' + Math.random().toString(16).substr(-6)
5 |
6 | const Card = ({ color, children }) => {
7 | return (
8 |
16 | {children}
17 |
18 | )
19 | }
20 |
21 | const App = () => {
22 | const [color, setColor] = useState('skyblue')
23 |
24 | return (
25 |
30 |
31 | setColor(randomColor())}
35 | />
36 |
37 |
38 | )
39 | }
40 |
41 | render(, document.querySelector('#app'))
42 |
--------------------------------------------------------------------------------
/examples/files/core_components/toggle.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { View, Text, Button, StyleSheet } from 'react-native'
3 |
4 | export default function Toggle({ label, options, value, onChange }) {
5 | return (
6 |
7 | {label}
8 |
9 | {options.map((option) => (
10 |
18 |
19 | )
20 | }
21 |
22 | const styles = StyleSheet.create({
23 | container: {
24 | flexDirection: 'column',
25 | paddingBottom: 12,
26 | },
27 | label: {
28 | fontSize: 14,
29 | padding: 4,
30 | },
31 | optionsContainer: {
32 | flexDirection: 'row',
33 | flexWrap: 'wrap',
34 | },
35 | })
36 |
--------------------------------------------------------------------------------
/components/SpectacleSlideshow.tsx:
--------------------------------------------------------------------------------
1 | import { MDXProvider } from '@mdx-js/react'
2 | import dynamic from 'next/dynamic'
3 | import React from 'react'
4 | import { Slideshow } from 'react-guidebook'
5 | import { Slide } from 'react-guidebook/lib/utils/requireSlides'
6 |
7 | import EditorConsole from './EditorConsole'
8 |
9 | const Example = (props: React.ComponentProps) => (
10 |
11 | )
12 |
13 | interface Props {
14 | slides: Slide[]
15 | }
16 |
17 | // Load spectacle dynamically, since it doesn't work with SSR
18 | export default dynamic(
19 | () =>
20 | import('spectacle').then((spectacle) => {
21 | return ({ slides }) => (
22 |
29 | )
30 | }),
31 | {
32 | ssr: false,
33 | }
34 | )
35 |
--------------------------------------------------------------------------------
/pages/core_components/lists/flatlist.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: FlatList
3 | ---
4 |
5 | import flatlist from '../../../examples/files/core_components/flatlist.js'
6 |
7 | `FlatList`s are used for large quantities of scrollable content. They expose the underlying `ScrollView`, but add performance improvements: only rendering the content on screen (clipping offscreen content), and only updating rows that have changed. Like `ScrollView`s, they can scroll horizontally or vertically.
8 |
9 | Instead of rendering their `children` prop, `FlatList`s render each item in their input `data` using the `renderItem` prop. The `renderItem` prop is a function which takes an item from the `data` array and maps it to a React Element. Each item in `data` should be an object with a unique id, so that React can determine when items are rearranged. The unique id is looked up as `item.key` by default, but you can specify another way to find/build the id by passing a `keyExtractor` function prop.
10 |
11 |
12 |
--------------------------------------------------------------------------------
/components/Disqus.tsx:
--------------------------------------------------------------------------------
1 | import { DiscussionEmbed } from 'disqus-react'
2 | import React from 'react'
3 | import { PageLayout } from 'react-guidebook'
4 | import styled from 'styled-components'
5 |
6 | const Container = styled.div({
7 | backgroundColor: 'rgb(250,250,250)',
8 | })
9 |
10 | const isDev = process.env.NODE_ENV === 'development'
11 |
12 | interface Props {
13 | identifier: string
14 | title: string
15 | shortname: string
16 | stagingShortname?: string
17 | }
18 |
19 | export default function Disqus({
20 | identifier,
21 | title,
22 | shortname,
23 | stagingShortname,
24 | }: Props) {
25 | if (typeof window === 'undefined') return null
26 |
27 | const name = isDev ? stagingShortname : shortname
28 |
29 | if (!name) return null
30 |
31 | const url = window.location.href
32 |
33 | return (
34 |
35 |
36 |
37 |
38 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/examples/files/animation/animatedInterpolate.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import { Animated, Button } from 'react-native'
3 |
4 | export default function MyComponent() {
5 | const value = useRef(new Animated.Value(0.1))
6 |
7 | return (
8 | <>
9 |