react-native-laminar 1.4.1 → 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -73,6 +73,35 @@ export default function Counter() {
|
|
|
73
73
|
}
|
|
74
74
|
```
|
|
75
75
|
|
|
76
|
+
### Slots
|
|
77
|
+
|
|
78
|
+
Use `variant="slots"` when each digit should roll through a vertical reel.
|
|
79
|
+
Prefixes and separators remain ordinary text content.
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
import React, { useState } from "react";
|
|
83
|
+
import { Button, View } from "react-native";
|
|
84
|
+
import { Laminar } from "react-native-laminar";
|
|
85
|
+
|
|
86
|
+
export default function SlotCounter() {
|
|
87
|
+
const [value, setValue] = useState("07:42");
|
|
88
|
+
|
|
89
|
+
return (
|
|
90
|
+
<View style={{ alignItems: "center", gap: 16 }}>
|
|
91
|
+
<Laminar
|
|
92
|
+
text={value}
|
|
93
|
+
variant="slots"
|
|
94
|
+
fontSize={48}
|
|
95
|
+
animationPreset="snappy"
|
|
96
|
+
clipToBounds
|
|
97
|
+
style={{ color: "#000000", fontVariant: ["tabular-nums"] }}
|
|
98
|
+
/>
|
|
99
|
+
<Button title="Change" onPress={() => setValue("08:15")} />
|
|
100
|
+
</View>
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
76
105
|
### Inside a button with auto-sizing
|
|
77
106
|
|
|
78
107
|
```tsx
|
|
@@ -86,6 +115,43 @@ export default function Counter() {
|
|
|
86
115
|
</Pressable>
|
|
87
116
|
```
|
|
88
117
|
|
|
118
|
+
### Auto-sized button with leading icons
|
|
119
|
+
|
|
120
|
+
Pass a text-keyed `leading` map when the button changes between visual states.
|
|
121
|
+
Laminar selects the matching entry and animates icon-to-icon replacements.
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
import { ActivityIndicator, Pressable, Text } from "react-native";
|
|
125
|
+
import { Laminar } from "react-native-laminar";
|
|
126
|
+
|
|
127
|
+
const leading = {
|
|
128
|
+
"Sending Request": <ActivityIndicator color="#ffffff" />,
|
|
129
|
+
"Request Sent!": <Text style={{ color: "#ffffff", fontSize: 20 }}>✓</Text>,
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
<Pressable
|
|
133
|
+
style={{
|
|
134
|
+
alignItems: "center",
|
|
135
|
+
backgroundColor: "#007aff",
|
|
136
|
+
borderRadius: 36,
|
|
137
|
+
justifyContent: "center",
|
|
138
|
+
paddingHorizontal: 24,
|
|
139
|
+
paddingVertical: 12,
|
|
140
|
+
}}
|
|
141
|
+
>
|
|
142
|
+
<Laminar
|
|
143
|
+
text={status}
|
|
144
|
+
leading={leading}
|
|
145
|
+
leadingGap={5}
|
|
146
|
+
autoSize
|
|
147
|
+
style={{ color: "#ffffff", fontSize: 18, fontWeight: "700" }}
|
|
148
|
+
/>
|
|
149
|
+
</Pressable>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
The map key must match the current `text` value. A missing entry means no
|
|
153
|
+
leading element, so the icon fades out when the button returns to a plain label.
|
|
154
|
+
|
|
89
155
|
### Centered text in a fixed-width container
|
|
90
156
|
|
|
91
157
|
Use `align` when the parent owns the width and Laminar should place the animated row inside that space.
|