Skip to content

Being able to use margin inside VoltraAndroid.Box #161

@Angelk90

Description

@Angelk90

Library Version

2.0.0-rc.2

React Native Version

0.85.3

React Version

19.2.3

Expo Version

56.0.5

Minimal Reproduction

I have the following code example two Box one below the other inside a VoltraAndroid.Column, I can't use margin between the two boxes.

Screenshot_20260527_185500_zzz~2.png

import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import {
  VoltraWidgetPreview,
} from '@use-voltra/android-client';
import { VoltraAndroid } from '@use-voltra/android'

function App() {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <View style={styles.container}>
        <MyWidgetPreview />
      </View>
    </SafeAreaProvider>
  );
}

function MyWidgetPreview() {
  return (
    <VoltraWidgetPreview
      family="extraLarge"
      style={{ backgroundColor: '#1557ff', borderRadius: 4 }}
    >
      <VoltraAndroid.Column style={{}}>
        <VoltraAndroid.Box
          style={{
            backgroundColor: "#ffffff",
            borderRadius: 4,
            width: 100,
            height: 100,
            margin: 5
          }}
          contentAlignment='center'
        >
          <VoltraAndroid.Text style={{ color: '#000' }}>A</VoltraAndroid.Text>
        </VoltraAndroid.Box>
        <VoltraAndroid.Box
          style={{
            backgroundColor: "#000000",
            borderRadius: 4,
            width: 100,
            height: 100
          }}
          contentAlignment='center'
        >
          <VoltraAndroid.Text style={{ color: '#fff' }}>B</VoltraAndroid.Text>
        </VoltraAndroid.Box>
      </VoltraAndroid.Column>
    </VoltraWidgetPreview>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Additional Information (Optional)

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions