@haloriyan/grid

Simple grid component that actually worked.

Installation

npm i @haloriyan/grid

Usage

export default function App() {
	const users = [
		{name: "Riyan", username: "haloriyan"},
		{name: "Intan", username: "halointan"},
		{name: "Syarifah", username: "hisya"},
		{name: "Gista", username: "gistavil_"},
	]
	return (
		<View style={styles.container}>
			<View>
				<Grid col={2} gap={10}>
					{ users.map((user, u) => (
						<View key={u} style={styles.box}>
							<Text style={styles.name}>{user.name}</Text>
							<Text style={styles.username}>@{user.username}</Text>
						</View>
					))}
				</Grid>
			</View>
			<StatusBar style="auto" />
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		padding: 20,
		paddingTop: 80,
		backgroundColor: '#ecf0f1',
		flexGrow: 1
	},
	box: {
		backgroundColor: '#fff',
		borderRadius: 8,
		padding: 20,
		aspectRatio: 1,
		justifyContent: 'flex-end',
		gap: 5,
	},
	name: {
		fontSize: 16,
		color: '#444',
		fontWeight: '700',
	},
	username: {
		fontSize: 12,
		color: '#777'
	}
});