mirror/iNaturalistReactNative
1
0
Fork 0
mirror of https://github.com/inaturalist/iNaturalistReactNative.git synced 2025-12-23 22:18:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update radio button row element margins and paddings

Browse Source
This commit is contained in:
Johannes Klein
2024-07-03 23:54:32 +02:00
parent 4991149745
commit 269882b93c
1 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/SharedComponents/RadioButtonRow.js
View File

@@ -43,21 +43,28 @@ const RadioButtonRow = ( {
return (
<Pressable testID={testID} accessibilityRole="button" onPress={onPress}>
<View className="flex-row items-center">
{/* RadioButton.Android has a built-in margin of 8, so we have to add a padding
of 4 to the left of the text container to match the design of distance of 12 between
button and text. Similarly we have to add a margin of 8 only to top in order to get
to the wanted 16. */}
<View className="mt-2 flex-row items-top">
{/* Essentially this element has m-2 built-in */}
<RadioButton.Android
onPress={onPress}
value={value}
status={status}
accessibilityLabel={label}
/>
<View className="flex-row">
<Label className="mr-2">{label}</Label>
{icon && <INatIcon name={icon} size={19} color={theme.colors.secondary} />}
<View className="ml-1 mt-2 mr-[33px]">
<View className="flex-row">
<Label className="mr-[10px]">{label}</Label>
{icon && <INatIcon name={icon} size={19} color={theme.colors.secondary} />}
</View>
{description && (
<List2 className="mt-1">{description}</List2>
)}
</View>
</View>
{description && (
<List2 className="ml-[37px] mr-[33px] py-1">{description}</List2>
)}
</Pressable>
);
};