Skip to content

fix Snacks preview appearance, allow customizing, tweak few examples #4754

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 28, 2025
Merged

fix Snacks preview appearance, allow customizing, tweak few examples #4754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 7 additions & 10 deletions docs/textinput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
return (
<SafeAreaProvider>
<SafeAreaView
style={[
styles.container,
{
backgroundColor: value,
},
]}>
style={{
flex: 1,
backgroundColor: value.toLowerCase(),
}}>
<TextInput
editable
multiline
Expand All @@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
};

const styles = StyleSheet.create({
container: {
borderBottomColor: '#000',
borderBottomWidth: 1,
},
textInput: {
padding: 10,
borderColor: '#000',
borderWidth: 1,
margin: 12,
},
});

Expand Down
6 changes: 3 additions & 3 deletions docs/view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const ViewBoxesWithColorAndText = () => {
return (
<SafeAreaProvider>
<SafeAreaView style={{height: 100, flexDirection: 'row'}}>
<View style={{backgroundColor: 'blue', flex: 0.2}} />
<View style={{backgroundColor: 'red', flex: 0.4}} />
<SafeAreaView style={{flexDirection: 'row'}}>
<View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
<View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
<Text>Hello World!</Text>
</SafeAreaView>
</SafeAreaProvider>
Expand Down
1 change: 1 addition & 0 deletions plugins/remark-snackplayer/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ The above code snippet would look like this:
| supportedPlatforms | Supported platforms | `"ios,android,web"` |
| theme | SnackPlayer theme, `"light"` or `"dark"` | `"light"` |
| preview | Preview visible, `"true"` or `"false"` | `"true"` |
| deviceAppearance | Sets the preview mobile device appearance, `"light"` or `"dark"` | `"light"` |
| loading | iFrame loading attribute, `"auto"`, `"lazy"` or `"eager"` | `"lazy"` |
| deviceAndroid | Emulator type used for Android, [see Appetize options](https://docs.appetize.io/core-features/playback-options) | `pixel4` |
| deviceIos | Simulator type used for iOS, [see Appetize options](https://docs.appetize.io/core-features/playback-options) | `iphone12` |
Expand Down
2 changes: 2 additions & 0 deletions plugins/remark-snackplayer/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ async function toJsxNode(node) {
const theme = params.theme ?? 'light';
const preview = params.preview ?? 'true';
const loading = params.loading ?? 'lazy';
const deviceAppearance = params.deviceAppearance ?? 'light';

// Need help constructing this AST node?
// Use the MDX Playground and explore what your output mdast should look like
Expand All @@ -72,6 +73,7 @@ async function toJsxNode(node) {
attr('data-snack-theme', theme),
attr('data-snack-preview', preview),
attr('data-snack-loading', loading),
attr('data-snack-device-appearance', deviceAppearance),
attr('data-snack-device-frame', 'false'),
],
children: [],
Expand Down
17 changes: 7 additions & 10 deletions website/versioned_docs/version-0.77/textinput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
return (
<SafeAreaProvider>
<SafeAreaView
style={[
styles.container,
{
backgroundColor: value,
},
]}>
style={{
flex: 1,
backgroundColor: value.toLowerCase(),
}}>
<TextInput
editable
multiline
Expand All @@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
};

const styles = StyleSheet.create({
container: {
borderBottomColor: '#000',
borderBottomWidth: 1,
},
textInput: {
padding: 10,
borderColor: '#000',
borderWidth: 1,
margin: 12,
},
});

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.77/view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const ViewBoxesWithColorAndText = () => {
return (
<SafeAreaProvider>
<SafeAreaView style={{height: 100, flexDirection: 'row'}}>
<View style={{backgroundColor: 'blue', flex: 0.2}} />
<View style={{backgroundColor: 'red', flex: 0.4}} />
<SafeAreaView style={{flexDirection: 'row'}}>
<View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
<View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
<Text>Hello World!</Text>
</SafeAreaView>
</SafeAreaProvider>
Expand Down
17 changes: 7 additions & 10 deletions website/versioned_docs/version-0.78/textinput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
return (
<SafeAreaProvider>
<SafeAreaView
style={[
styles.container,
{
backgroundColor: value,
},
]}>
style={{
flex: 1,
backgroundColor: value.toLowerCase(),
}}>
<TextInput
editable
multiline
Expand All @@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
};

const styles = StyleSheet.create({
container: {
borderBottomColor: '#000',
borderBottomWidth: 1,
},
textInput: {
padding: 10,
borderColor: '#000',
borderWidth: 1,
margin: 12,
},
});

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.78/view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const ViewBoxesWithColorAndText = () => {
return (
<SafeAreaProvider>
<SafeAreaView style={{height: 100, flexDirection: 'row'}}>
<View style={{backgroundColor: 'blue', flex: 0.2}} />
<View style={{backgroundColor: 'red', flex: 0.4}} />
<SafeAreaView style={{flexDirection: 'row'}}>
<View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
<View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
<Text>Hello World!</Text>
</SafeAreaView>
</SafeAreaProvider>
Expand Down
17 changes: 7 additions & 10 deletions website/versioned_docs/version-0.79/textinput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
return (
<SafeAreaProvider>
<SafeAreaView
style={[
styles.container,
{
backgroundColor: value,
},
]}>
style={{
flex: 1,
backgroundColor: value.toLowerCase(),
}}>
<TextInput
editable
multiline
Expand All @@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
};

const styles = StyleSheet.create({
container: {
borderBottomColor: '#000',
borderBottomWidth: 1,
},
textInput: {
padding: 10,
borderColor: '#000',
borderWidth: 1,
margin: 12,
},
});

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.79/view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const ViewBoxesWithColorAndText = () => {
return (
<SafeAreaProvider>
<SafeAreaView style={{height: 100, flexDirection: 'row'}}>
<View style={{backgroundColor: 'blue', flex: 0.2}} />
<View style={{backgroundColor: 'red', flex: 0.4}} />
<SafeAreaView style={{flexDirection: 'row'}}>
<View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
<View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
<Text>Hello World!</Text>
</SafeAreaView>
</SafeAreaProvider>
Expand Down
17 changes: 7 additions & 10 deletions website/versioned_docs/version-0.80/textinput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
return (
<SafeAreaProvider>
<SafeAreaView
style={[
styles.container,
{
backgroundColor: value,
},
]}>
style={{
flex: 1,
backgroundColor: value.toLowerCase(),
}}>
<TextInput
editable
multiline
Expand All @@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
};

const styles = StyleSheet.create({
container: {
borderBottomColor: '#000',
borderBottomWidth: 1,
},
textInput: {
padding: 10,
borderColor: '#000',
borderWidth: 1,
margin: 12,
},
});

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.80/view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const ViewBoxesWithColorAndText = () => {
return (
<SafeAreaProvider>
<SafeAreaView style={{height: 100, flexDirection: 'row'}}>
<View style={{backgroundColor: 'blue', flex: 0.2}} />
<View style={{backgroundColor: 'red', flex: 0.4}} />
<SafeAreaView style={{flexDirection: 'row'}}>
<View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
<View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
<Text>Hello World!</Text>
</SafeAreaView>
</SafeAreaProvider>
Expand Down
17 changes: 7 additions & 10 deletions website/versioned_docs/version-0.81/textinput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
return (
<SafeAreaProvider>
<SafeAreaView
style={[
styles.container,
{
backgroundColor: value,
},
]}>
style={{
flex: 1,
backgroundColor: value.toLowerCase(),
}}>
<TextInput
editable
multiline
Expand All @@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
};

const styles = StyleSheet.create({
container: {
borderBottomColor: '#000',
borderBottomWidth: 1,
},
textInput: {
padding: 10,
borderColor: '#000',
borderWidth: 1,
margin: 12,
},
});

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.81/view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const ViewBoxesWithColorAndText = () => {
return (
<SafeAreaProvider>
<SafeAreaView style={{height: 100, flexDirection: 'row'}}>
<View style={{backgroundColor: 'blue', flex: 0.2}} />
<View style={{backgroundColor: 'red', flex: 0.4}} />
<SafeAreaView style={{flexDirection: 'row'}}>
<View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
<View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
<Text>Hello World!</Text>
</SafeAreaView>
</SafeAreaProvider>
Expand Down