My Sublime 3 settings

{
    "auto_complete_commit_on_tab": true,
    "color_scheme": "Packages/Oceanic Next Color Scheme/Oceanic Next.tmTheme",
    "draw_white_space": "all",
    "font_face": "Fira Mono",
    "font_size": 20,
    "tab_size": 2,
    "theme": "Brogrammer.sublime-theme",
    "translate_tabs_to_spaces": true,
    "trim_automatic_white_space": true,
    "trim_trailing_white_space_on_save": true
}

Here's the equivalent snippets for Vim UltiSnips, minus setting names from current file name.

rnccf

snippet rnccf
import React, { PropTypes } from 'react'
import { View, StyleSheet, Text } from 'react-native'

$1.propTypes = {

}

export default function ${1:FunctionName} (props) {
	return (
		<View>
			<Text>
			 $1
			</Text>
		</View>
	)
}


const styles = StyleSheet.create({
	$0

})

endsnippet

rnccs

snippet rnccs
import React, { PropTypes, Component } from 'react'
import { View, Text } from 'react-native'

export default class ${1:ClassName} extends Component {
	static propTypes = {}
	state = {}
	render () {
		return (
			${0:<View>
				<Text>
					$1
				</Text>
			</View>}
		)
	}
}
endsnippet

duck

snippet duck
const initialState = {}

export default function ${1:FunctionName} (state = initialState, action) {
	switch (action.type) {
		default :
			return state
	}
}
endsnippet

Intellij please!

Thanks @igolden, I've expanded upon what you did and made them take the file basename by default.
You can see all of @tylermcginnis above code snippets for vim in the gist below

React Vim Snippets gist

Update:
The gist above contains the vimified version of Tylers snippets, but as I go through the course, I find myself making more snippets. if you're interested, take a look at my dotfiles/javascript.snippets. I'll leave the above gist as-is

@botmaster @JimmyLv and anyone else using Intellij, you can use Live Templates to achieve the same thing as Sublime's snippets.

Info here:
https://blog.jetbrains.com/webstorm/2018/01/using-and-creating-code-snippets

and all available variables (including filename and filename without extension) here:
https://www.jetbrains.com/help/idea/live-template-variables.html

As an example, you can set up a Live Template for a React Native Functional Component by going to Preferences > Editor > Live Templates and creating a new Template Group (I called mine React Native) and then a new Live Template in that group. The abbreviation is rnccf, description is whatever you want, and the "Template text" is as follows:

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

$ComponentName$.propTypes = {

}

export default function $ComponentName$ (props) {
  return (
    <View>
      <Text>
        $ComponentName$
      </Text>
    </View>
  )
}

$ComponentName$ creates a variable, which you edit by clicking "Edit variables". Make the "Expression" for this variable fileNameWithoutExtension(), and then define the available contexts by clicking "Define" below the template text. It's a similar process for creating the other snippets.