├── .npmignore
├── data
├── index.js
└── censored-stamp-path.js
├── demo
├── assets
│ ├── censored.jpg
│ └── uncensored.jpg
├── react-native-censor-demo.png
└── App.js
├── expo
├── index.js
├── CensoredStamp.js
└── Censored.js
├── stuff
└── new-android-logo-05.png
├── index.js
├── styles.js
├── CensoredStamp.js
├── Censored.js
├── package.json
├── LICENSE
└── README.md
/.npmignore:
--------------------------------------------------------------------------------
1 | demo/
2 | stuff/
--------------------------------------------------------------------------------
/data/index.js:
--------------------------------------------------------------------------------
1 | export * from './censored-stamp-path'
--------------------------------------------------------------------------------
/demo/assets/censored.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redpandatronicsuk/react-native-censored/HEAD/demo/assets/censored.jpg
--------------------------------------------------------------------------------
/demo/assets/uncensored.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redpandatronicsuk/react-native-censored/HEAD/demo/assets/uncensored.jpg
--------------------------------------------------------------------------------
/expo/index.js:
--------------------------------------------------------------------------------
1 | export { default as Censored } from './Censored'
2 | export { default as CensoredStamp } from './CensoredStamp'
--------------------------------------------------------------------------------
/stuff/new-android-logo-05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redpandatronicsuk/react-native-censored/HEAD/stuff/new-android-logo-05.png
--------------------------------------------------------------------------------
/demo/react-native-censor-demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redpandatronicsuk/react-native-censored/HEAD/demo/react-native-censor-demo.png
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | export { default as Censored } from './Censored'
2 | export { default as CensoredStamp } from './CensoredStamp'
3 | export * from './styles'
--------------------------------------------------------------------------------
/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native'
2 |
3 | export const styles = StyleSheet.create({
4 | container: {
5 | alignItems: 'center',
6 | justifyContent: 'center'
7 | },
8 | unblurred: {
9 | alignItems: 'center',
10 | justifyContent: 'center'
11 | }
12 | })
--------------------------------------------------------------------------------
/expo/CensoredStamp.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Svg } from 'expo'
3 | import { censoredStampPath } from '../data/censored-stamp-path'
4 |
5 | export default class CensoredStamp extends React.Component {
6 | render() {
7 | const { height = 65.5, width = 339.4, style, scale = 1, fill = '#BE1622' } = this.props
8 | return (
9 |
12 | )
13 | }
14 | }
--------------------------------------------------------------------------------
/CensoredStamp.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Svg, { Path } from 'react-native-svg'
3 | import { censoredStampPath } from './data/censored-stamp-path'
4 |
5 | export default class CensoredStamp extends React.Component {
6 | render() {
7 | const { height = 65.5, width = 339.4, style, scale = 1, fill = '#BE1622' } = this.props
8 | return (
9 |
12 | )
13 | }
14 | }
--------------------------------------------------------------------------------
/Censored.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image, Platform, StyleSheet, Text, View } from 'react-native'
3 | import { BlurView } from 'react-native-blur'
4 | import { CensoredStamp, styles } from '.'
5 |
6 | export default class Censored extends React.Component {
7 | render() {
8 | const { children, intensity = 100, tint = 'light', scale, rotate = '45deg', fill, platforms = [] } = this.props
9 | return (
10 | platforms.includes(Platform.OS) ?
11 |
12 | { children }
13 |
14 |
15 |
16 |
17 | : { children }
18 | )
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/expo/Censored.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Image, Platform, StyleSheet, Text, View } from 'react-native'
3 | import { BlurView } from 'expo'
4 | import { styles } from '..'
5 | import { CensoredStamp } from '.'
6 |
7 | export default class Censored extends React.Component {
8 | render() {
9 | const { children, intensity = 100, tint = 'light', scale, rotate = '45deg', fill, platforms = [] } = this.props
10 | return (
11 | platforms.includes(Platform.OS) ?
12 |
13 | { children }
14 |
15 |
16 |
17 |
18 | : { children }
19 | )
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-censored",
3 | "version": "0.1.0",
4 | "description": "React Native component to censor app content",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/redpandatronicsuk/react-native-censored.git"
12 | },
13 | "keywords": [
14 | "react",
15 | "native",
16 | "censor",
17 | "expo"
18 | ],
19 | "author": "RedPandaTronics LTD",
20 | "license": "MIT",
21 | "bugs": {
22 | "url": "https://github.com/redpandatronicsuk/react-native-censored/issues"
23 | },
24 | "homepage": "https://github.com/redpandatronicsuk/react-native-censored#readme",
25 | "peerDependencies": {
26 | "react-native": ">=0.46.0",
27 | "react": "16.0.0-alpha.12",
28 | "react-native-svg": "^5.4.1",
29 | "react-native-blurview": "^1.0.1"
30 | }
31 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 RedPandaTronics
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/demo/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dimensions, Image, StyleSheet, Text, View } from 'react-native'
3 | import { Censored } from 'react-native-censored' // 'react-native-censored/expo' for Expo apps!
4 |
5 | console.disableYellowBox = true
6 |
7 | export default class App extends React.Component {
8 | render() {
9 | return (
10 |
11 |
12 | Jesus Christ
13 |
14 |
15 |
16 |
17 | Prophet Muhammad
18 |
19 |
20 |
21 | )
22 | }
23 | }
24 |
25 | const styles = StyleSheet.create({
26 | container: {
27 | flex: 1,
28 | backgroundColor: '#fff',
29 | flexDirection: 'column',
30 | alignItems: 'center',
31 | justifyContent: 'space-around',
32 | },
33 | imageTitle: {
34 | color: 'black',
35 | fontSize: 24,
36 | textAlign: 'center'
37 | },
38 | image: {
39 | resizeMode: 'contain',
40 | maxHeight: 0.4 * Dimensions.get('window').height
41 | }
42 | })
43 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-native-censored
2 | `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.
3 |
4 | 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.
5 |
6 | ## Installation
7 | `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`.
8 |
9 | ## Usage
10 | ### Example
11 |
12 | ```jsx
13 | import React from 'react'
14 | import { Dimensions, Image, StyleSheet, Text, View } from 'react-native'
15 | import { Censored } from 'react-native-censored'
16 | // For Expo apps use line below instead of above line:
17 | // import { Censored } from 'react-native-censored/expo'
18 |
19 | export default class App extends React.Component {
20 | render() {
21 | return (
22 |
23 |
24 | Jesus Christ
25 |
26 |
27 |
28 | Prophet Muhammad
29 |
30 |
31 |
32 | )
33 | }
34 | }
35 |
36 | const styles = StyleSheet.create({
37 | container: {
38 | flex: 1,
39 | backgroundColor: '#fff',
40 | flexDirection: 'column',
41 | alignItems: 'center',
42 | justifyContent: 'space-around',
43 | },
44 | imageTitle: {
45 | color: 'black',
46 | fontSize: 24,
47 | textAlign: 'center'
48 | },
49 | image: {
50 | resizeMode: 'contain',
51 | maxHeight: 0.4 * Dimensions.get('window').height
52 | }
53 | })
54 | ```
55 |
56 |
57 |
58 |
59 | ### Parameters
60 | | Name | Default | Description |
61 | |-----------|-----------|-------------------------------------------------------------------------------|
62 | | intensity | 100 | Blur amount |
63 | | tint | 'light' | Blur tint, either light or dark |
64 | | scale | 1 | Scale factor for the censored stamp |
65 | | rotate | '45deg' | Rotation of the censored stamp |
66 | | fill | '#BE1622' | Colour of the stamp |
67 | | 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. |
68 |
69 |
70 | ### Who uses react-native-censored
71 | ## TrumpTweetTrumps
72 |
57 | 
75 |