Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/redpandatronicsuk/react-native-censored
React Native component to censor content
https://github.com/redpandatronicsuk/react-native-censored
Last synced: 6 days ago
JSON representation
React Native component to censor content
- Host: GitHub
- URL: https://github.com/redpandatronicsuk/react-native-censored
- Owner: redpandatronicsuk
- License: mit
- Created: 2017-09-03T16:18:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-26T21:05:58.000Z (over 6 years ago)
- Last Synced: 2024-11-10T17:57:54.249Z (about 1 month ago)
- Language: JavaScript
- Size: 1.83 MB
- Stars: 13
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-censored ★8 - React Native component to censor content. (Components / UI)
- awesome-reactnative-ui - react-native-censored - native-censored/blob/master/demo/react-native-censor-demo.png)| (Others)
- awesome-react-native - react-native-censored ★8 - React Native component to censor content. (Components / UI)
- awesome-react-native - react-native-censored ★8 - React Native component to censor content. (Components / UI)
- awesome-reactnative-ui - react-native-censored - native-censored/blob/master/demo/react-native-censor-demo.png)| (Others)
- awesome-react-native - react-native-censored ★8 - React Native component to censor content. (Components / UI)
README
# react-native-censored
`react-native-censored` is a tool for quickly censoring potentially objectionable content in your app so it conforms to the guidelines of the app market you are publishing too.
The Apple AppStore and Google PlayStore have similar - yet different - guidelines, Google's guidelines generally being more lenient. React Native apps share most (if not all) code between the iOS and Android app and it becomes hard having to manage different content. `react-native-censored` lets you easily censor content for specific platforms.
## Installation
`react-native-censored` uses [react-native-blur](https://github.com/react-native-community/react-native-blur) to achieve the blur effect and [react-native-svg](https://github.com/react-native-community/react-native-svg) to display the censored stamp. If you are using [Expo](https://expo.io/) you already have these dependencies pre-installed. If your app is not using Expo you will have to install `react-native-blur` and `react-native-svg` before you can use `react-native-censored`.
## Usage
### Example
```jsx
import React from 'react'
import { Dimensions, Image, StyleSheet, Text, View } from 'react-native'
import { Censored } from 'react-native-censored'
// For Expo apps use line below instead of above line:
// import { Censored } from 'react-native-censored/expo'
export default class App extends React.Component {
render() {
return (
Jesus Christ
Prophet Muhammad
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-around',
},
imageTitle: {
color: 'black',
fontSize: 24,
textAlign: 'center'
},
image: {
resizeMode: 'contain',
maxHeight: 0.4 * Dimensions.get('window').height
}
})
```
### Parameters
| Name | Default | Description |
|-----------|-----------|-------------------------------------------------------------------------------|
| intensity | 100 | Blur amount |
| tint | 'light' | Blur tint, either light or dark |
| scale | 1 | Scale factor for the censored stamp |
| rotate | '45deg' | Rotation of the censored stamp |
| fill | '#BE1622' | Colour of the stamp |
| platforms | [] | The platforms the content should be censored on. For example, ['ios'] would blur the content on iOS devices, but leave it uncensored on Android devices, ['ios', 'android'] would censor it on iOS and Android platforms. |
### Who uses react-native-censored
## TrumpTweetTrumps
