VS Code React Native Snippets Full

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code

Installation

Visual Studio Marketplace

Launch Quick Open:

• Linux: Ctrl+P
• macOS: ⌘P
• Windows: Ctrl+P

Paste the following command and press Enter:

ext install hngocl.react-native-snippets-full

GitHub Repository Clone

Change to your .vscode/extensions VS Code extensions directory. Depending on your platform it is located in the following folders:

• Linux: ~/.vscode/extensions
• macOS: ~/.vscode/extensions
• Windows: %USERPROFILE%\.vscode\extensions

Clone the Material Theme repository as hngocl.react-native-snippets-full:

git clone https://github.com/hngocl/vs-code-full.git

Search command

You can search through snippets with ES7 snippet search command which can be run with CMD + Shift + P or just use CMD + Shift + R (CTRL + ALT + R for Windows & Linux) keybinding.

Here is direct link to marketplace React Native Snippets Full

Supported languages (file extensions)

• JavaScript (.js)
• JavaScript React (.jsx)
• TypeScript (.ts)
• TypeScript React (.tsx)

Snippets info

Every space inside { } and ( ) means that this is pushed into next line :) $ represent each step after tab.

Basic Methods

React

React Hooks

• All hooks from official docs are added with hook name prefix.

React Native

Redux

Console

React Native Components

rnhm

import React, { memo } from 'react'
import { View, Text } from 'react-native'

const FileNameComponent = () => {
    return (
        <View>
            <Text></Text>
        </View>
    )
}

export default FileName = memo(FileNameComponent,isEqual)

rnhms

import React, { memo } from 'react'
import { View, Text } from 'react-native'

const styles = StyleSheet.create({

});

const FileNameComponent = () => {
    return (
        <View>
            <Text></Text>
        </View>
    )
}

export default FileName = memo(FileNameComponent,isEqual)

rthm

import React, { memo } from 'react'
import { View, Text } from 'react-native'

interface FileNameProps {

}

const indexComponent = ({}:FileNameProps) => {
    return (
        <View>
            <Text></Text>
        </View>
    )
}

export default FileName = memo(FileNameComponent,isEqual)

rthms

import React, { memo } from 'react'
import { View, Text } from 'react-native'

const styles = StyleSheet.create({

});

interface FileNameProps {

}

const FileNameComponent = ({}:FileNameProps) => {
    return (
        <View>
            <Text></Text>
        </View>
    )
}

export default FileName = memo(FileNameComponent,isEqual)

timreducer

import { produce } from 'immer'
import * as Action from '';

export interface FileNameState {

}
const initialState: FileNameState = {

};
interface ActionProps {
    type: keyof typeof Action;
    payload: any;
}
export default
    produce((draftState: FileNameState, { type, payload }: ActionProps) => {
        switch (type) {
            default:
                break;
        }
    }, initialState)

rni

interface index {

}

erni

export interface index {

}

tsuseSelector

const {state} = useSelector<any>(x => x.state);

tsuseRef

const ref = useRef<any>(initialValue)

rxsaga

export function* functionName() {

}

useDispatch

const dispatch = useDispatch();

srtest

import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'

import store from 'src/store'
import { ${1:ComponentName} } from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(
    <Provider store={store}>
      <${1:${TM_FILENAME_BASE}} {...defaultProps} />)
    </Provider>,
  )

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

sntest

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'

import ${1:ComponentName} from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {

  }

  const wrapper = renderer.create(<${1:ComponentName} {...defaultProps} />)

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

snrtest

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'

import store from 'src/store/configureStore'
import ${1:ComponentName} from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(
    <Provider store={store}>
      <${1:ComponentName} {...defaultProps} />
    </Provider>,
  )

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})