📄️ All Components
A cheat sheet to quickly start, all the below components are from the popular react-native-paper framework, kindly visit its documentation for more details.
📄️ Text
<Editor singleScreen= title="Text example" code={
📄️ Button
<Editor singleScreen= title="Button example" code={
📄️ Avatar text
<Editor singleScreen= title="Text Avatar example" code={
📄️ Avatar icon
<Editor singleScreen= title="Icon Avatar example" code={
📄️ Avatar image
<Editor singleScreen= title="Image Avatar example" code={
📄️ Activity indicator
<Editor singleScreen= title="Activity Indicator example" code={
📄️ Checkbox
<Editor singleScreen= title="Checkbox example" code={
📄️ Radio button
📄️ Fab
<Editor singleScreen= title="Fab example" code={
📄️ Progress bar
<Editor singleScreen= title="Progress bar example" code={
📄️ Switch
<Editor singleScreen= title="Switch example" code={
📄️ Text input
<Editor singleScreen= title="Text input example" code={
📄️ Divider
<Editor singleScreen= title="Divider example" code={
📄️ View
<Editor singleScreen= title="View example" code={
📄️ Badge
<Editor singleScreen= title="Badge example" code={
📄️ Chip
<Editor singleScreen= title="Chip example" code={
📄️ Card
<Editor singleScreen= title="Card example" code={
📄️ Card Title
<Editor singleScreen= title="Card title example" code={
📄️ Card Cover
<Editor singleScreen= title="Card cover example" code={
📄️ Card Content
<Editor singleScreen= title="Card content example" code={
📄️ Card Action
<Editor singleScreen= title="Card action example" code={
📄️ Dialog
<Editor singleScreen= title="Dialog example" code={
📄️ Dialog Title
<Editor singleScreen= title="Dialog title example" code={
📄️ Dialog Scroll Area
<Editor singleScreen= title="Dialog scrollarea example" code={
📄️ Dialog Content
<Editor singleScreen= title="Dialog content example" code={
📄️ Dialog Action
<Editor singleScreen= title="Dialog action example" code={
📄️ Helper Text
<Editor singleScreen= title="Helper Text example" code={
📄️ Segmented Buttons
<Editor singleScreen= title="Segmented buttons example" code={
📄️ Tooltip
<Editor singleScreen= title="Tooltip example" code={
📄️ Icon Button
<Editor singleScreen= title="Icon button example" code={
📄️ Search Bar
<Editor singleScreen= title="Search bar example" code={
📄️ ScrollView
<Editor singleScreen= title="Search bar example" code={
📄️ Appbar Header
<Editor singleScreen= title="App Bar example" code={
📄️ Appbar Content
<Editor singleScreen= title="App Bar content example" code={
📄️ Appbar Back Action
<Editor singleScreen= title="App Bar back action example" code={
📄️ Appbar Action
<Editor singleScreen= title="App Bar action example" code={
📄️ Modal
<Editor singleScreen= title="Icon button example" code={
📄️ Video Player
The Nano framework has inbuilt video player from react-native-video. Visit the package for more details.
📄️ Youtube Player
The Nano framework has inbuilt youtube player from react-native-youtube-iframe. Visit the package for more details.