A React Native compatible fork of rough-notation - Create and animate hand-drawn annotations in React Native and Expo apps.
- 🎨 Hand-drawn annotation styles
- 📱 React Native & Expo compatible
- 🎬 Smooth animations
- 🔧 Highly customizable
- 📦 TypeScript support
npm install rough-notation-native rough-native react-native-svg
# or
yarn add rough-notation-native rough-native react-native-svgFor Expo projects:
npx expo install rough-notation-native rough-native react-native-svgimport React from 'react';
import { View, Text } from 'react-native';
import { RoughNotation } from 'rough-notation-native';
export default function App() {
return (
<View>
<RoughNotation type="underline" show={true} color="#FF5733">
<Text>This text is underlined!</Text>
</RoughNotation>
</View>
);
}underline- Draw a sketchy underline below the contentbox- Draw a box around the contentcircle- Draw a circle around the contenthighlight- Highlight the content with a sketchy backgroundstrike-through- Draw a strike-through line over the contentcrossed-off- Draw an 'X' over the contentbracket- Draw brackets around the content
| Prop | Type | Default | Description |
|---|---|---|---|
type |
RoughAnnotationType |
'underline' |
The annotation style |
show |
boolean |
true |
Whether to show the annotation |
animate |
boolean |
true |
Whether to animate the annotation |
animationDuration |
number |
800 |
Animation duration in milliseconds |
animationDelay |
number |
0 |
Animation delay in milliseconds |
color |
string |
'#000' |
Color of the annotation |
strokeWidth |
number |
2 |
Width of the annotation stroke |
padding |
number | number[] |
5 |
Padding around the annotation |
iterations |
number |
2 |
Number of rough passes to make |
rtl |
boolean |
false |
Right-to-left animation |
brackets |
BracketType | BracketType[] |
['right'] |
Bracket types for bracket annotation |
multiline |
boolean |
false |
Support for multiline annotations |
onAnimationComplete |
() => void |
- | Callback when animation completes |
<View>
<RoughNotation type="box" color="#e74c3c">
<Text>Important!</Text>
</RoughNotation>
<RoughNotation type="highlight" color="#f39c12" strokeWidth={40}>
<Text>Highlighted content</Text>
</RoughNotation>
<RoughNotation type="circle" color="#2ecc71" padding={15}>
<Text>Circled text</Text>
</RoughNotation>
</View>const [showFirst, setShowFirst] = useState(false);
const [showSecond, setShowSecond] = useState(false);
useEffect(() => {
setTimeout(() => setShowFirst(true), 500);
setTimeout(() => setShowSecond(true), 1500);
}, []);
return (
<View>
<RoughNotation type="underline" show={showFirst} color="#3498db">
<Text>First annotation</Text>
</RoughNotation>
<RoughNotation type="box" show={showSecond} color="#e74c3c">
<Text>Second annotation</Text>
</RoughNotation>
</View>
);<RoughNotation
type="bracket"
brackets={['left', 'right']}
color="#34495e"
>
<Text>Code snippet</Text>
</RoughNotation>- Uses
rough-nativeinstead ofroughjsfor React Native compatibility - Component-based API instead of imperative API
- Animations use React Native's animation system
- No DOM manipulation - pure React Native components
- Simplified API focused on React Native use cases
MIT