How to Filter Vulgar Words in React Native

If you’re building a social, chat, or comment-based mobile app using React Native, protecting your users from offensive or vulgar language is crucial for maintaining a safe environment.

In this article, you’ll learn how to filter out vulgar or inappropriate words from user-generated content using simple and effective strategies in React Native.

See How to Toggle Password Visibility in React Native

Why Filter Vulgar Words?

Offensive language can:

• Harm the user experience.
• Violate app store policies (Google Play, Apple App Store).
• Damage your brand’s reputation.
• Lead to account bans or user complaints.

Tools & Libraries to Use

There are several approaches to profanity filtering, but we’ll explore the most beginner-friendly one using:

• bad-words: A lightweight JavaScript filter for bad words.
• A custom word blacklist (optional).

Step 1: Install the bad-words Library

npm install bad-words

or

yarn add bad-words

Step 2: Filter Input Text

Let’s create a function to filter text before it’s submitted or displayed:

import Filter from 'bad-words';

const filter = new Filter();

export const cleanText = (text: string): string => {
  return filter.clean(text);
};

Example Usage in a Chat App

import React, { useState } from 'react';
import { View, TextInput, Button, Text, StyleSheet } from 'react-native';
import { cleanText } from './filterService'; // assume you created this function

export default function MessageInput() {
  const [input, setInput] = useState('');
  const [submitted, setSubmitted] = useState('');

  const handleSend = () => {
    const cleaned = cleanText(input);
    setSubmitted(cleaned);
    setInput('');
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={input}
        onChangeText={setInput}
        placeholder="Type your message..."
      />
      <Button title="Send" onPress={handleSend} />
      <Text style={styles.output}>Filtered: {submitted}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20 },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    marginBottom: 10,
    padding: 10,
    fontSize: 16,
  },
  output: {
    marginTop: 10,
    fontStyle: 'italic',
    color: '#333',
  },
});

Conclusion

Filtering vulgar words in React Native is easy using the bad-words package. Whether you’re building a chat app, comments system, or forum, adding a profanity filter helps you keep your app clean and community-friendly.